I am trying to implement layouts in a vue-3 application.
Based on this solution, I created a simple layout file:

AppLayoutDashboard.vue:

<template>
  <div style="border: 2px solid red">
    <h1>AppLayoutDashboard.vue</h1>

    <slot/>
  </div>
</template>

In order to use it in some view, I to:
HomeView.vue:

<template>
  <app-layout-dashboard>

    <!-- VIEW CODE HERE -->

  </app-layout-dashboard>
</template>

I want to make it more flexible and move it to App.vue. If I move directly the <app-layout-dashboard> tag to this file, everything works fine.
However, I want it to be loaded dynamically. In order to do so, I thought to add a new attribute to routes array:

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
    meta:{
      layout: 'AppLayoutDashboard',

    }
  },

I tried to use <component :is="layout"> (I retrieve layout from routing), but it doesn’t work. Any suggestion?