How do I create a DynamicMarker in vue composition api with custom html

[Afasha Isakiye]

Hello, I am trying to implement a code editor with remote users and currently I have a basic code Editor component like this.
```

<template>

<div class="ace-container">

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

</div>

</template>

<script setup>

import ace, { Range } from 'ace-builds'

import "ace-builds/webpack-resolver";

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});

})

</script>

<style lang="scss" scoped>

.ace-container{

position:relative;

height: 60vh;

}

.ace-editor {

/*height: 150px;*/

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

}

</style>

```

How do I add a remote user using addDynamicMarker ?