Is it possible to have nested layouts within one page?

<script lang="ts">
import type { User } from './assets/interface/user';
import { useStore } from './stores/stores';

export default defineComponent({
  name: 'App',
  data() {
    return {
      layout: 'main' as LayoutKey
    }
  },
  setup() {
    const store = useStore()
    const route = useRoute()
    return {store, route}
  },
  methods: {
    async getUser() {      
     
    },
  },
  created() {
    this.getUser()
    // this.setLayout()
  },
  components: {
    UploadAvatar
  },
  computed: {
    layoutComputed() {
      return this.route.meta.dynamicLayout != undefined ? this.route.meta.dynamicLayout as LayoutKey : 'main'
    }
  },
  watch: {
    route() {
    }
  }
})
</script>

<template>
  <NuxtLayout>
    <NuxtLayout :name="layoutComputed">
      <NuxtPage/>
    </NuxtLayout>
  </NuxtLayout>
</template>


<style lang="scss">
@use "./assets/styles/styles.scss";
</style>