AlpineJS X-ref Binding to display HTML from another file - alpine.js

Question

I am currently learning Alpine JS and trying to find examples of binding using x-ref ( As per to the Docs: https://github.com/alpinejs/alpine#x-ref )but there isn't many as it only became a feature late year year. I am just wondering could anyone provide an example on how to x-ref a variable so it can be used in a Fetch Method.
Currently I am not using x-ref and using x-html which is not rendering the HTML code for some reason, so I'm hoping by using x-ref it will work(?)
<div x-data="foo()" x-init="init()" >
<div>
<template x-for="foo in list" :key="foo.id">
<button
#click="activeTab = itemfooid"
x-text="foo.name"
x-ref="foo.name"
x-on:click="getHTML( item )"
>
</template>
<div x-ref="myxRef" x-show="activeTab === 0" x-html ="foo[0].name"> post </div>
</div>
Fetch Foo
function foo(){
activeTab: 0, // Set active tab to POST
list: [],
init(){
this.list = { id: 1, name: 'foo', code: 'null' },
}
}
getHTML( foo){
fetch('url/example.html')
.then(response => response.text() )
.then(html => {
if( foo.code=== undefined ){
foo.code= html
}
})
.catch( error => console.log ( error ) )
},
Example HTML:
<code language-php> $test = 1 <div x-if="country === undefined"> echo "Hey"; </div> return $test </code>
My code will only have the code brackets and the rest inside will be plain text.
Below is an example I found on which I'm trying to follow but that doesn't work either. https://laracasts.com/discuss/channels/javascript/laravel-alpinejs-fetch-and-x-ref
<div x-ref="test" class="window-content"></div>
<script>
function windowManager()
fetch('/frontend/blog')
.then(response => response.text())
.then(html => { this.$refs.test.innerHTML = html })
}
</script>