Render custom component while adding the html with plain javascript/jquery

I am trying to use a Vue component inside jquery ui dialog. The problem is that I am adding the component html using javascript rather that relying on Vue itself.

I’ve reproduced the problem Here.

So far I’ve tried using _update function but it does not work as expected.

Is it possible to add the custom component with javascript then tell Vue to render the custom component?

That won’t work. if you remove/override add DOM with jQuery, Vue will never “see” it.

If this should work someway, you first have to add the DOM and then mount the Vue instance to it, so Vue can use the DOM in #app as the initial template. Calling _update later will do nothing, because Vue does not use the DOM for its templates except for the first mount, it uses an internal virtualDOM.

Why do you do this? What are you trying to achieve?

Maybe a small dynamic component like this can help?

I am trying to move some of the business logic in my app to separated vue components. I am using jquery ui dialog on some of them and when I display the dialog I want to to render the component. The problem is that this jquery dialog is added to the DOM of the root Vue component. I guess that I will have to remove the jquery dialog and find another solution if I can’t render the custom component.