Vue transition layouts not triggering transition

Question

I'm using vite-plugin-vue-layouts pattern for my Vue3 project. I've been trying to follow docs to setup transitions between pages and I'm not able to make it work somehow... Pages are displaying pages but there is no transition between them...

This is my layout page (admin-dashboard.vue)

<style>
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>

<template>
  <Navigation />
  <main class="py-10 lg:pl-72">
    <div class="px-4 sm:px-6 lg:px-8">
      <router-view v-slot="{ Component, route }">
        <transition>
          <div><component :is="Component" :key="route" /></div>
        </transition>
      </router-view>
    </div>
  </main>
</template>

and this is my page example (pages/admin/users/index.vue)

<template>
  <Suspense>
    <template #default>
      <UsersTable />
    </template>

    <template #fallback>
      <LoadingSpinner />
    </template>
  </Suspense>
</template>
<script setup>
import LoadingSpinner from "~/components/LoadingSpinner.vue";
import UsersTable from "../../../components/admin/users/UsersTable.vue";
</script>
<route lang="yaml">
meta:
  layout: admin-dashboard
</route>