How to implement the correct work of the dynamic layout component in vue3?

Question

Vue.js

Where is the mistake?

app.vue

<template>
    <component :is="layout">
      <router-view/>
    </component>
</template>

<script>
export default {
  name: 'App',
  computed: {
    layout() {
      const layoutName = this.$route.meta.layout || 'DefaultLayout';
      return () => import(`@/layouts/${layoutName}.vue`)
    }
  },
}
</script>

index.js (router)

...
import Home from "../views/Home";
const routes = [
    {
        path: '',
        name: 'Home',
        component: Home,
        meta: {
            layout: () => import('../layouts/DefaultLayout')
        }
    },
...

Well, actually there are DefaultLayout and Home components.

Answer 1

Don't reinvent the wheel, use nested routes https://router.vuejs.org/guide/essentials/nested-r...

Answer 2

There is a handy thing for Vite - vite-plugin-vue-layouts