I'm trying to use Vue compiler to render dynamic HTML texts; I have implemented this component:

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

I have succeeded in doing so, in one level. Like the code below, and it works fine.

<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>

I'm trying to add a second layer in a nested manner:

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

I get this warning:

[Vue warn]: Property "htmlTest2" was accessed during render but is not defined on instance.

Resulting into the error:

Uncaught (in promise) TypeError: template is undefined