const componentData = {
“label”: “body”,
“category”: “default”,
“children”: [{
“label”: “Droppable Component”,
“category”: “Custom Components”,
“children”: [{
“label”: “Registration Page”,
“category”: “Custom Components”
}]
}]
};

so i have a json tree like this, where the outer component has the inner component inside of it. I am fetching the components definitions from database using there labels here and each component is made in Vue3.

// Register each component dynamically
        data.forEach(component => {
          const scriptObj = JSON.parse(component.canvasDisplayScript);
          if (!scriptObj.methods) scriptObj.methods = {};
          const methods = Object.entries(scriptObj.methods).reduce((methodsAcc, [key, value]) => {
            methodsAcc[key] = eval(`(${value})`);
            return methodsAcc;
          }, {});

          const componentName = `dynamic-${component.label.replace(/s+/g, '-').toLowerCase()}`;
          componentDefinitions[component.label] = componentName;

          Vue.component(componentName, {
            ...scriptObj,
            data() {
              return scriptObj.data ? scriptObj.data() : {};
            },
            mounted() {
              console.log(`Component '${componentName}' mounted`);
              const styleTag = document.createElement('style');
              styleTag.innerHTML = component.canvasDisplayStyle;
              document.head.appendChild(styleTag);
            },
            methods,
            template: component.canvasDisplayTemplate
          });
        });

so the thing is when i run the registration and mounting process on the tree. Vue mounts the parent component and does not mount the child component. Because of which when it renders i can only see the parent and not the child in the html.

Is there any way or workaround this. How do i resolve this issue.