lazy loading layouts like `vue-router` does with components

I currently have a system whereby I can specify a layout on each route like this:

/router/index.ts

import Blank from '@/layouts/Blank.vue'
import Home from '@/views/Home.vue'
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
name: 'home',
path: '/',
component: Home,
meta: {
layout: Blank
}
},
],
})
export default router

/router/meta.d.ts

import type { Component, MaybeRefOrGetter } from 'vue'
import 'vue-router'
export {}
declare module 'vue-router' {
interface RouteMeta {
layout?: MaybeRefOrGetter<Component>
}
}

And then I apply it automatically on App.vue

<script setup lang="ts">
import { computed, toValue } from 'vue'
import Blank from './layouts/Blank.vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const layout = computed(() => toValue(route.meta.layout || Blank))
</script>
<template>
<component :is="layout">
<RouterView />
</component>
</template>

However this has the problem of forcing the load of all layouts specified in router/index.ts, even if I don't use them. I wanted to add lazy-loading support just like I can do on the view components in vue-router, but it turns out it's not as simple as I thought... if I try to add it in my current system I get this error:

[Vue warn]: Component is missing template or render function:  
Promise { <state>: "pending" }

How does vue-router handle lazy loading components? and how should I implement it? Also what type signature should I add on router/meta.d.ts? Thanks