Using Vue.js 3 component dynamically in the D3.js v7 - d3.js

Question

im using the Vue.js 3 and D3.js v7 to making the flowchart.
My problem here is I can't dynamically append the component inside the D3.js.
My component is imported like shown below.
components: {
StoryPanel: defineAsyncComponent(() => import("#/Pages/Story/Partials/StoryPanel"))
},
let nodes = container.selectAll("g")
.data(root.descendants())
.join("g")
.append("foreignObject")
.attr("width", entityWidth - 10)
.attr("height", 150)
nodes.append("xhtml:div")
.attr("class", "border border-black")
.html(function (d) {
// return '<StoryPanel />' tried this but not working
})
.style("border", '1px solid black')
This is the generated html
<foreignObject width="190" height="150" transform="translate(-95,10)">
<div class="border border-black" style="border: 1px solid black;">
<storypanel></storypanel>
</div>
</foreignObject>
[Edit 1]
Tried this Rendering Vue 3 component into HTML string as #MichalLevý suggested, but still not working
.html(function (d) {
const tempApp = createApp({
render() {
return h(StoryPanel,{step: d})
}
})
const el = document.createElement('div');
const mountedApp = tempApp.mount(el)
return mountedApp.$el.outerHTML
})
[Edit 2]
I found it works only when using const instead of a Component.vue
const CircleWithTextSvg = {
name: 'CircleWithTextSvg',
props: {
text: {
type: String,
default: "1"
},
fill: {
type: String,
default: "white"
}
},
template: `<div>template</div>`
}
Any help is appreciated. Thank you.

Answer 1

Use createApp
import {createApp} from 'vue';
and use this instead and return the outerHTML
const app = createApp(Component, {prop1: this.prop1})
.mount(document.createElement('div'))
return app.$el.outerHTML