vue3 transition do not work inside layout component

I want to use some transitions in my Vue3 SPA.
I use Vuetify and vue-router.

I have ‘’’’’’ in two places.
If put the transition into App.ejvue, it works fine, but only, when the whole app loads.
But, if I try to put the transition component inside my layout structure, the exactly same transition what I used in App.vue does nothing.
What would be the problem?

// App.vue
<template>
  <router-view v-slot="{ Component }">
    <transition name="slide">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<style scoped>
.wrapper {
  width: 100%;
  min-height: 100vh;
}

.slide-enter-active,
.slide-leave-active {
  transition: all 0.75s ease-out;
}
// further css
</style>

But, if I try to use it inside my layout, it does nothing.
Where is the problem?

// DefaultLayout.vue
<template>
  <v-app>
    <top-bar />
    <default-view />
    <bottom-bar />
  </v-app>
</template>

<script setup>
// imports
</script>

// DefaultView.vue
<template>
  <v-main class="mt-3 ml-2 mr-2">
    
      <router-view v-slot="{ Component }">
        <transition name="slide">
          <component :is="Component" />
        </transition>
      </router-view>
  
  </v-main>
</template>


<style scoped>
.wrapper {
  width: 100%;
  min-height: 100vh;
}

.slide-enter-active,
.slide-leave-active {
  transition: all 0.75s ease-out;
}

// further css
</style>

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: "https://stackoverflow.com/",
    component: () => import('@/layouts/default/DefaultLayout.vue'),
    children: [
      {
        path: '',
        name: 'home',
        component: () => import(/* webpackChunkName: "home" */ '@/views/HomeView.vue'),
        meta: { requiresAuth: false },
      },
    ],
// ... other routes defined here
]

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

export default router