MIgrating from Vue 2 to 3: Programmatically creating component instances to get rendered html

We are in process of migrating to vue3, and one of the things we need to migrate is how we are using the pattern of programmatically rendering Vue components.

But it gets trickier with one use case where a service in the end returns a string that contains html and sends it back to parent Vue components for them to use inside v-html. 99% the html is just divs and classes we put together in our code as a string. But we have 2 cases where we also actually use Vue components to generate some parts of the returned HTML. And in Vue 2 we’d do it like this:

// In a service
const ComponentClass = app.extend(ComponentToRender);
const ComponentInstance = new ComponentClass({
    propsData: props,
});
ComponentInstance.$mount();
return `
<div class="css-classes">
    ${ComponentInstance.$el.outerHTML}
</div>`;

Important part here is that the output in the end gets sent back as a string and is later used in v-html in some parent component. And its also important that for the initialized component the mounted hook gets triggered because in there we calculate based on props some styles that need to be added via refs to the component.

Now I’ve tried almost all the options I could find googling - createApp(), createVNode(), compile(), using refs, using the npm package mount-vue-component, none of the options achieve what we need.

I’ve set up a simple example of what we are trying to achieve for in the SFC playground as well: link to the SFC playground

Any help on how we should tackle this is greatly appreciated. Seems like in Vue3 we should achieve this somehow entirely different, but I dont yet undertand which is the correct path. Because with createApp I can get the component to render, but not within the html string that we send back from the service.

Thank you already in advance.

Isn’t the following Stack Overflow question precisely what you try to do?