Proper way to have the same Vue instance on the same page for multiple times?

Question

I work in an ASP.NET MVC environment with Vue3 front-end, and I have a block that is displayed multiple times on a page. This block has to be a Vue instance, and the issue comes from the fact that no matter what, the first instance block overwrites the following ones with its own values/parameters.

Code: HTML, block-like page(here each div can be seen as a block

<div id="instance1" ref="1">
  <div v-init="()=>{instanceData='instance_1'}">
    {{instanceData}}
  </div>
</div>

<div id="instance2" ref="2">
  <div v-init="()=>{instanceData='instance_2'}">
    {{instanceData}}
  </div>
</div>

<div id="instance3" ref="3">
  <div v-init="()=>{instanceData='instance_3'}">
    {{instanceData}}
  </div>
</div>

Mounting the instances to the block ids

const instance ={
  data(){
    return{
      instanceData:'asd',
    }
  },
  methods:{
    test : function(name) {
      alert(name);
    }
  },
  directives:{
    init:{
        mounted(el, binding, vnode) {
        binding.value();
        }
    }
  },
}
Vue.createApp(instance).mount('#instance1');
Vue.createApp(instance).mount('#instance2');
Vue.createApp(instance).mount('#instance3');

This issue is seen in here: http://jsfiddle.net/yc4Lhjdp/20/ , this being the closest I could get to a block structure in a js fiddle :D. In the example, the normal, or rather preferred, behaviour would have been to have displayed ('instance_1', 'instance_2', 'instance_3'). Instead, the first instance hijacks (so to say) the init directive of the others, even though it is mounted on a div via an id that is completely separated from the rest.

I would like to, first of all, understand why this is happening, and then any solutions are much appreciated. Thanks in advance.