Quiero crear una función de resaltado de texto en mi aplicación. Esta es la idea: estoy recibiendo un fragmento de HTML de un extremo de la API y quiero reemplazar algunos elementos con componentes de Vue que funcionen completamente.

Pude lograrlo con la ayuda de este artículo y se me ocurrieron las siguientes líneas esenciales:

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

El HTML mismo se inyectó previamente en un elemento de plantilla como este:

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

Aparentemente, el problema es que si $mount la instancia del componente, no existirá como parte de la jerarquía de la aplicación, sino por sí misma. Estoy usando una tienda Vuex para manejar la lógica, por lo que me gustaría enviar una acción dentro del componente TextHighlight . Intentar acceder a this.$store no es posible ya que la tienda es desconocida para TextHighlight . Una solución para esto que podría encontrar en esta respuesta haciendo así:

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

Pero esto parece ser una solución mientras el componente en sí todavía está fuera de la aplicación principal. ¿Hay una mejor manera de adjuntar un componente dinámicamente (programadamente) a la jerarquía?

También existe la forma de usar la función de renderizado, pero no estoy seguro de cómo usarla en mi caso.