Render reactive vue component without using createApp().mount()

[AbdallahAlhaddad]

I was wondering if there is a way to reuse the main application vue instance instead of creating a new vue instance for each reactive component I programmatically create

Use Case

I want to use vue components to render visuals in a diagramming framework. I have managed to make it work, but I was wondering if there is a better way rather than creating a new vue app instance for each visual in the diagram. below is a simplified version of the working code.

Simplified code

import { type Component, createApp } from 'vue'

export class VueComponentVisualStyle extends NodeStyleBase<VueComponentNodeStyleVisual> {
  constructor(private readonly vueComponent: Component) {}

  protected createVisual(context) {
    const div = context.canvasComponent!.div.ownerDocument.createElement('div')
    const props = {}
    const app = createApp(this.vueComponent, props) //  Any alternatives?
    app.mount(div)  // 👈  Is there a better way to create a vue component?
    const visual = HtmlVisual.from(div) 

    // ...

    context.setDisposeCallback(visual, () => {
      app.unmount() // 👈  Dispose vue component
      return null
    })

    // ...

    return visual
  }

  protected updateVisual(oldVisual) {
    const props = {}
    oldVisual.props = props // 👈  Update component props to let vue `efficiently` manage rerendering
  }
}

Solution should avoid creating a new vue instance for each rendered component (only one instance is allowed)

[Shyam-Chen]

#8787