How to utilize multiple layouts in Vuetify 3 Application

Question

When I create a essential vuetify application with npm I am loaded with the layouts folder containing default.vue and its components.

Then in the router I have the following:

/**
 * router/index.ts
 *
 * Automatic routes for `./src/pages/*.vue`
 */

// Composables
import { createRouter, createWebHistory } from 'vue-router/auto'
import { setupLayouts } from 'virtual:generated-layouts'

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  extendRoutes: setupLayouts,
})

This extendedRoutes property loads the default layout. However, I have multiple layouts (one for login screen and one for my dashboard). It is unclear how to utilize multiple layouts. When I created a primevue application via npm I was able to use the router as follows and define my layout for my child routes:

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: () => import('../views/LoginView.vue'),
      meta: {
        requiresAuth: false,
      },
    },
    {
      path: '/',
      component: () => import('../layouts/DashboardLayout.vue'),
      meta: {
        requiresAuth: false,
      },
      children: [
        {
          path: '/',
          name: 'Dashboard',
          component: () => import('../views/HomeView.vue'),
        },
        {
          path: '/upload',
          name: 'Upload Review',
          component: () => import('../views/HomeView.vue'),
        },
        {
          path: '/files',
          name: 'Files',
          component: () => import('../views/HomeView.vue'),
        },
        {
          path: '/support',
          name: 'Support',
          component: () => import('../views/HomeView.vue'),
        },
        {
          path: '/settings',
          name: 'Settings',
          component: () => import('../views/HomeView.vue'),
        },
        {
          path: '/management/test-review',
          name: 'Management Test Review',
          component: () => import('../views/HomeView.vue'),
        },
        {
          path: '/management/type-review',
          name: 'Management type Review',
          component: () => import('../views/HomeView.vue'),
        },
      ],
    },
    // default redirect to home page
    { path: '/:pathMatch(.*)*', redirect: '/login' }
  ]
})

Its unclear why this similar approach does not work for vuetify. My DashboardLayout.vue contains the following:

<template>
  <v-app>
    <v-layout>
      <SideNavBar/>
      <TopNavBar/>
      <View/>
    </v-layout>
  </v-app>
</template>
<script lang="ts">
  import SideNavBar from './dashboard/SideNavBar.vue'
  import TopNavBar from './dashboard/TopNavBar.vue'
  import View from './dashboard/View.vue'
</script>

And the View component contains the router-view. So I am unsure what the issue is here. Its as though vuetify is doing something else under the hood for vue router and layouts.