Dynamic content with vue instance

I was building a login form with vue on shopify which is server side rendered, vue just hydrates it on the front end. I am in a bit of an interesting predicament. I have a custom slide out drawer/modal that is reusable and configurable and it works very good actually.

So when the login icon is clicked the drawer modal slides out and the vue form is cloned and appended. I used clone node and realized I lost all my event listeners, v-model no longer works, and I did get it to work with event delegation but the reason I wanted to use vue in the first place was to avoid this traditional dom manipulation and to use declarative rendering.

The vue form is in a div with a class of hidden. So it is always there and the vue app is bound to that. I am wondering if there is a way to insert this content into the modal while keeping the event listeners like @click on the elements themselves rather than having to write longer scripts using event delegation

Seems like you should be able to pass it as a component to your modal to be rendered.

Another approach is to use teleport.

No that‘s not it, I am on shopify, for seo purposes I am creating small apps that control different parts of the site. I am not having one root app.

I solved this already with event delegation but then I lose many of the perks of using vue