I want to create a text highlighting feature in my app. Here is the idea: I am receiving a piece of HTML from an API endpoint and want to relace some elements with fully working Vue components.

I could achieve it with the help of also this article and came up with the following essential lines:

// node is here the current HTML node from API
const textHighlight = new TextHighlightClass({ propsData: { text: node.innerText } });
textHighlight.$mount(document.getElementById(node.id));

The HTML itself was previously injected into a template element like this:

<div v-html="contentFromApi"></div>

The problem is apparently if you $mount the component instance it will not exist as part of the app hierarchy but on it's own. I'm using a Vuex store to handle the logic so I would like to dispatch an action inside of the TextHighlight component. Trying to access this.$store is not possible as the store is unknown to TextHighlight. A solution for this I could find in this answer doing like this:

const textHighlight = new TextHighlightClass({ store, propsData: { text: node.innerText } });

But this seems to be a workaround while the component itself is still outside of the main application. Is there a better way to attach a component dynamically (programmatically) to the hierarchy?

There is also the way of using the render function but I'm not sure how to use it in my case.