How to mirgate [Vue 2] Vue.compile to Vue 3

Hello everyone, it took me 6 months to develop my project on vue 3 and now i have a problem that i might have to switch back to vue 2 i am very stressed someone help me!!!

I’m trying to mirgate this vue 2 component to vue 3:

      import vue from "vue";

      export default {
        props: {
          template: String,
          children: Array,
          handler: Function,
        },
        data() {
          return {
            templateRender: null,
          };
        },
        watch: {
          // Every time the template prop changes, I recompile it to update the DOM
          template: {
            immediate: true,
            handler() {
              const res = vue.compile(this.template);

              this.templateRender = res.render;

              this.$options.staticRenderFns = [];

              this._staticTrees = [];

              for (let i in res.staticRenderFns) {
                this.$options.staticRenderFns.push(res.staticRenderFns[i]);
              }
            },
          },
        },
        render() {
          if (!this.templateRender) {
            return null;
          }

          return this.templateRender();
        },
      };

i tried some ways on vue 3 but it doesn’t work like it does on vue 2 :frowning:
i’m using vue 3.2.16 and vue.esm-bundler.js to be able to use compile function

  1. With this code, I change only a property in the template DOM will have to show the whole but with the above code vue 2 DOM only change a small part:

     <template>
       <TemplateRender :children="children" :handler="handler" />
     </template>
    
     <script setup>
    
       import { defineProps, compile, computed } from "vue";
    
       const props = defineProps({
         children: Array,
         template: String,
         handler: Function,
       });
    
       const TemplateRender = computed(() => {
         return compile(props.template);
       });
     </script>
    
  2. With this code, it seems to work only on create when I update the template in props again the DOM is not updated again :frowning:

     <script lang="tsx">
       import { defineComponent, compile } from "vue";
    
       const Dynamic = defineComponent({
         render(_ctx, data, props) {
    
           const templateContent = compile(props.template)(props);
    
           return templateContent;
         }
       });
    
     </script>
    
     <script lang="tsx" setup>
       import { defineProps } from "vue";
    
       const props = defineProps({
         children: Array,
         template: String,
         handler: Function,
       });
     </script>
    

P/S: Anyone have any other way please help me!!!