VTPagination Invalid vnode type when creating vnode (Next branch)

[killemalljustice]

Hi, when i try to use the pagination component i got this error:

vendor.js?id=17ec72e5dc028eb917274e21405a2516:9128 [Vue warn]: Invalid vnode type when creating vnode: . 
  at <VTPagination currentPage=1 onUpdate:currentPage=fn total-pages=1  ... > 
  at <Anonymous as="template" enter="ease-out duration-300" enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"  ... > 
  at <ForcePortalRoot force=false > 
  at <PortalGroup target=null > 
  at <Portal> 
  at <ForcePortalRoot force=true > 
  at <Dialog as="div" class="fixed inset-0 z-10 overflow-y-auto" onClose=fn<close>  ... > 
  at <Anonymous onBeforeEnter=fn<onBeforeEnter> onAfterEnter=fn<onAfterEnter> onBeforeLeave=fn<onBeforeLeave>  ... > 
  at <Anonymous as="template" show=true > 
  at <BaseModal show=true size="4xl" closable=true  ... > 
  at <DialogModal show=true size="4xl" closable=true  ... > 
  at <MovimientosUsuarioModal show=true id-usuario=8 onClose=fn > 
  at <Movimientos id-usuario=8 class="pt-2" > 
  at <DatosUsuario initial-data= {id: 8,  telefono: '6666', email: 'test@test.com', estado: {…}, …} errors= {} onGeneraLogin=fn<generaLoginPorDefecto>  ... > 
  at <TabPanelContent> 
  at <TabPanel> 
  at <TabPanels> 
  at <TabGroup> 
  at <AppLayout title="Mantenedor Persona" > 
  at <Show jetstream= {canCreateTeams: false, canManageTwoFactorAuthentication: false, canUpdatePassword: true, canUpdateProfileInformation: true, flash: Array(0), …} user= {id: 8,  telefono: '6666', email: 'test@test.com', estado: {…}, …} errorBags= []  ... > 
  at <Inertia initialPage= {component: 'Mantenedores/Persona/Show', props: {…}, url: '/mantenedor/persona', version: 'd520424585affafb9e737f1d98ed9e75', scrollRegions: Array(0), …} initialComponent= {props: {…}, __file: 'resources/js/Pages/Mantenedores/Persona/Show.vue', inheritAttrs: false, setup: ƒ, render: ƒ, …} resolveComponent=fn<m>  ... > 
  at <App>

This is my code:

           <div class="-mx-4 mt-8 overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:mx-0 md:rounded-lg">
                <VTable
                    :data="movimientos"
                    :page-size="5"
                    v-model:currentPage="currentPage"
                    @totalPagesChanged="totalPages = $event"
                    class="min-w-full divide-y divide-gray-300"
                    :filters="filters">
                    <template #head>
                        <tr>
                            <th class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
                                Detalle
                            </th>
                            <th class="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 md:table-cell">
                                Fecha
                            </th>
                            <th class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Usuario</th>
                        </tr>
                    </template>
                    <template #body="{ rows }">
                        <tr v-for="row in rows" :key="row.id">
                            <td class="w-auto max-w-none py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
                                {{ row.nombre_movimiento }}
                                <dl class="bg-white font-normal md:hidden">
                                    <dt class="sr-only">Fecha</dt>
                                    <dd class="mt-1 truncate text-gray-700">{{ row.fecha }}</dd>
                                </dl>
                            </td>
                            <td class="hidden px-3 py-4 text-sm text-gray-500 md:table-cell">{{ row.fecha }}</td>
                            <td class="px-3 py-4 text-sm text-gray-500">{{ row.nombre_usuario }}</td>
                        </tr>
                    </template>
                </VTable>
            </div>
            <VTPagination v-model:currentPage="currentPage" :total-pages="totalPages" :boundary-links="true" />

 <script setup>
    import { ref, reactive } from 'vue'

    const movimientos = [
        {
            id: 1,
            nombre_movimiento: 'Se Actualiza Datos',
            fecha: '10-02-2022 12:04:47',
            nombre_usuario: 'GABRIEL GONZALEZ MORAGA',
        },
        {
            id: 2,
            nombre_movimiento: 'Se Ingresa Datos',
            fecha: '28-03-2022 10:22:47',
            nombre_usuario: 'JUAN PEREZ VARGAS',
        },
    ]

    const currentPage = ref(1)
    const totalPages = ref(1)

    const filters = reactive({
        nombre_usuario: { value: '', keys: ['nombre_usuario', 'nombre_movimiento'] },
    })
</script>

Thanks for the help.

[torgem]

Same here.