Estoy tratando de usar el compilador Vue para representar textos HTML dinámicos; He implementado este componente:

 app.component("dyno-html", { props: ["htmlTxt"], setup(props) { const textCompRef = computed(() => ({ render: compile(props.htmlTxt) })); return () => h(textCompRef.value); }, });

He tenido éxito en hacerlo, en un nivel. Al igual que el código de abajo, y funciona bien.

 <template> <div class="home"> <dyno-html :htmlTxt="htmlTest"></dyno-html> </div> </template> <script> export default { name: "Home", components: {}, data: function() { return { htmlTest: "<H1>Test</H1>", } } } </script>

Estoy tratando de agregar una segunda capa de forma anidada:

 htmlTest: "<h1>Test</h1><dyno-html :htmlTxt='htmlTest2'></dyno-html>", htmlTest2: "<h2>Test2</h2>",

Recibo esta advertencia:

[Advertencia de Vue]: se accedió a la propiedad "htmlTest2" durante el procesamiento, pero no está definida en la instancia.

Resultando en el error:

No capturado (en promesa) TypeError: la plantilla no está definida