Smart Layouts | Composition API AppLayout.vue

<template>
  <component :is="layout">
    <slot />
  </component>
</template>

<script>
import AppLayoutDefault from './AppLayoutDefault'
import { markRaw, watch } from 'vue'
import { useRoute } from 'vue-router'

export default {
  name: 'AppLayout',
  setup() {
    const layout = markRaw(AppLayoutDefault)
    const route = useRoute()

    watch(
      () => route.meta,
      async meta => {
        try {
          const component = await import(`@/layouts/${meta.layout}.vue`)
          layout.value = component?.default || AppLayoutDefault
        } catch (e) {
          layout.value = AppLayoutDefault
        }
      },
      { immediate: true }
    )

    return { layout }
  }
}
</script>

I tried this code but don't worked me. Some changes i did and code is work.

	const layout = shallowRef({})
	layout.value = markRaw(AppLayoutDefault)

	watch( () => route.meta, async (meta) => {
		try {
			const component = await import(`@/layouts/${ meta.layout }.vue`)
			layout.value = component?.default || AppLayoutDefault
		} catch (e) {
			layout.value = AppLayoutDefault
		}
	},{ immediate: true })
	return { layout }