Vue.js Layout define?

Question

Vue.js

Hello everyone, I wanted to ask if there are pages, there are layouty, which are defined for pages in router/index.js. In app.vue, I set the condition that, by the meta property, determine the layout otherwise empty layout. Everything works, but only the empty layout is loaded at the beginning, how can I fix this?
app.vue

import MainLayout from '@/layouts/MainLayout';
import CabinetLayout from '@/layouts/CabinetLayout';
import EmptyLayout from '@/layouts/EmptyLayout';
export default{
  computed:{
    layout() {
       if(this.$route.meta.layout)
       {
          return (this.$route.meta.layout) + '-layout';
       }
       else{
          return 'empty' + '-layout';
       }
        
    }

  
  },
  components:{

    CabinetLayout,EmptyLayout,MainLayout
  }


}

router/index.js

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "home",
    component: Home,
    meta:{layout:'main'}
  
  },
  {
    path: "/nutrition/foodmenu",
    name: "foodmenu",
    meta:{layout:'cabinet'},
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/nutrition/Foodmenu.vue")
  },
  {
    path: "/nutrition/journal",
    name: "journal",
    meta:{layout:'cabinet'},
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/nutrition/Journal.vue")
  },
  {
    path: "/login",
    name: "login",
    meta:{layout:'main'},
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/Login.vue")
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

export default router;

Answer 1

I decided that I first imported the components in router/index.js, then I already used the imported component