how can i render a template string like “<div>{{mydata.value_name}}</div>” in realtime with vue3 - vuejs3

Question

How can I render a template string like <div>{{mydata.value_name}}</div> in realtime with vue3
The data mydata I can definition dynamic
<script setup>
let dynamicCom
http.post("/someGate",(res)=>{
// when i get response ，i can initial the component dynamically
dynamicCom.template = "<div>{{mydata.value_name}}</div>"
dynamicCom.data = {
mydata:{value_name:"jim"}
}
})
</script>
<template>
<dynamicCom/>
</template>

Answer 1

If you only want to dynamically update some value, then Vue reactivity is enough. Just make your mydata reactive
const mydata = reactive({ value_name: "jim" })
If you want to render your component content dynamically, then you should use Vue Render Functions & JSX
Here is a simple playground to demonstrate both ways
const { createApp, h, reactive } = Vue;
const MyComponentA = {
setup() {
const mydata = reactive( {value_name: "jim"} );
return { mydata }
},
template: `
<div>
<input v-model="mydata.value_name" #update="mydata.value_name == $event.target.value" />
<div>value_name: {{mydata.value_name}}</div>
</div>`
}
const MyComponentB = {
setup() {
const mydata = reactive( {value_name: "jim"} );
return () =>
h('div', null,
[
h('input', {
value: mydata.value_name,
'onInput': (event) => mydata.value_name = event.target.value
}),
h('div', null, `value_name: ${mydata.value_name}`)
]
)
}
}
const App = { components: { MyComponentA, MyComponentB } }
const app = createApp(App)
app.mount('#app')
#app { line-height: 2; }
[v-cloak] { display: none; }
<div id="app">
<b>Vue Reactivity</b>
<my-component-a></my-component-a><hr/>
<b>Vue Reactivity & Render Functions</b>
<my-component-b></my-component-b>
</div>
<script src="https://unpkg.com/vue#3/dist/vue.global.prod.js"></script>