<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>

It will lead to an error while rendering:

[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.

What shall I do to fix this issue?