Переход на вид маршрутизатора компонента с диалогом vuetify не работает

Question

Итак, у меня есть представление Buildings.vue (маршрут: /buildings), и я пытаюсь применить переход к представлению дочернего маршрутизатора (маршрут: /buildings/dialog1), как описано в документации по vue маршрутизатора ( https://router.vuejs.org/guide/advanced/transitions.html#per -route-transition ):

<!-- Buildings.vue (route: '/buildings') -->
<transition name="fade">
    <router-view></router-view>
</transition>
<style scoped>
    .fade-enter-active, .fade-leave-active {
        transition: opacity 2s
    }
    .fade-enter, .fade-leave-to {
        opacity: 0
    }
</style>

<!-- Dialog.vue component -->
<template>
    <v-dialog>
        <!-- some dynamic content (for example from Dialog1.vue) -->
    </dialog>
</template>

<!-- Dialog1.vue view (route: '/buildings/dialog1')-->
<template>
    <Dialog>
        <!-- content -->
    </Dialog>
</template>

<script>
    import Dialog from "@/components/Dialog";

    export default {
        name: "Dialog1",
        components: {Dialog}
    }
</script>

// router.js
path: '/buildings',
component: BuildingsPage,
children: [
    {
        path: 'dialog1',
        component: Dialog1,
    },
]

При переключении на /buildings/dialog1 с помощью кнопки, однако, переход не отображается при все ...

Нужно ли использовать transition опору из v-dialog? (https://vuetifyjs.com/en/components/dialogs)

Есть идеи, что еще мне не хватает?