How would I add a dynamic html in vuejs ?

[Afasha Isakiye]

I have this code and I want to add some kind of remote cursors. I tried using addDynamic Cursor but I have failed and I failed to find anyone using it in vuejs. How can I do this?
```

<template>

          <div class="ace-editor relative h-full" ref="ace_text_area" ></div>

</template>

<script setup>

import ace from 'ace-builds'

import 'ace-builds/src-noconflict/snippets/javascript'

import { reactive, ref, onMounted } from 'vue'

const ace_text_area = ref(null)

const props = defineProps({ value: String })

const state = reactive( { aceEditor:null , value:"" } )

onMounted(()=>{

   state.value = props.value

   state.aceEditor = ace.edit(ace_text_area.value, {value: state.value});

    //state.aceEditor.session.addDynamicMarker(highlight);

})

</script>

<style lang='scss' scoped>

.ace-editor {

   /*height: 150px;*/

   position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

 left: 0;

}

</style>

```

Thank you in advance