<template> <div class="default-layout"> <router-view v-slot="{ index }"> <keep-alive> <component :is="index" :key="route.fullPath" /> </keep-alive> </router-view> </div> </template> <script lang="ts"> import { defineComponent} from "vue"; import { useRoute } from "vue-router"; import Index from "@/pages/index"; export default defineComponent({ name: "app", components: { Index, }, setup: () => { const route = useRoute(); return { route, index: Index }; }, }); </script>

Dará lugar a un error al renderizar:

 [Vue warn]: Hydration node mismatch: - Client vnode: Symbol(Comment) - Server rendered DOM: <!--[--> (start of fragment) at <KeepAlive> at <RouterView key=0 > at <App> Hydration children mismatch in <div>: server rendered element contains fewer child nodes than client vdom. Hydration completed but contains mismatches.

¿Qué debo hacer para solucionar este problema?