Estoy tratando de crear un tablero gridstack.js con Vue 3 y quiero que los elementos de la pila de cuadrícula contengan componentes reactivos de vue 3.

El problema es que estos elementos de la pila de cuadrícula solo se pueden pasar HTML. La documentación indica que debería poder agregar componentes de Vue como contenido, pero los ejemplos son para Vue 2 y estoy luchando para implementar esto en Vue 3.

Tengo el siguiente código:

 <template> <div class="p-6 h-full flex flex-col"> <header class="flex flex-row items-center justify-between mb-6"> <div> <h1 class="text-3xl font-bold"> Workbench </h1> <p class="leading-6 text-gray-600 text-sm mt-2"> {{ info }} </p> </div> <div class="flex flex-row items-center"> <button type="button" @click="addPanel()">Add Panel</button> </div> </header> <div class="flex-1"> <section class="grid-stack"></section> </div> </div> </template> <script setup> import { ref, onMounted, defineComponent, createApp } from "vue" import TestPanel from "./../components/panels/TestPanel.vue" let grid = null; const items = [ { x: 0, y: 0, h: 4, w: 6 }, { x: 7, y: 0, h: 4, w: 6 }, { x: 0, y: 5, h: 4, w: 4 }, { x: 4, y: 5, h: 4, w: 4 }, { x: 8, y: 5, h: 4, w: 4 }, ]; onMounted(() => { grid = GridStack.init({ // float: true, cellHeight: "70px", minRow: 1, }); grid.load(items) }); function addPanel() { const div = document.createElement("div") div.id = Math.random().toString(24).substring(8) const componentInstance = defineComponent({ extends: TestPanel, data() { return { test: "this is a test" } } }) const app = createApp(componentInstance) app.mount(div) let widget = grid.addWidget({ x: 0, y: 0, w: 6, h: 3, content: div.outerHTML, }) app.mount(div.id) } </script> <style> .grid-stack-item-content { background-color: #18BC9C; } </style>

Esto cargará el componente vue en un elemento de cuadrícula de pila, pero el componente ya no es reactivo.

Cualquier ayuda sería muy apreciada, gracias de antemano!