Problem with Nested Router View Transitions

Question

I have two navigation menu in my page structure, one is main header navigation and other one is in one of those main navigated page. I added transition onto both router views but child router view's transition doesn't work only parent. Let me explain with codes;

my routes:

const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/Home.vue') },
      {
        path: '/features',
        redirect: '/features/f1',
        component: () => import('pages/Features'),
        children: [
          { path: 'f1', component: () => import('pages/Feature1') },
          { path: 'f2', component: () => import('pages/Feature2') },
          { path: 'f3', component: () => import('pages/Feature3') },
          { path: 'f4', component: () => import('pages/Feature4') }
        ]
      },
      { path: 'pricing', component: () => import('pages/Pricing')},
      { path: 'register', component: () => import('pages/Register')}
    ]
  }
]

this is parent router view in main layout

<q-page-container class="l-background overflow-hidden">
      <router-view ref="main" v-slot="{ Component, route }">
        <transition name="fade-transform" mode="out-in">
          <component :is="Component" :key="route.path" />
        </transition>
      </router-view>
    </q-page-container>

and this is the component which includes child router view and its navigation:

<template>
  <q-page class="flex flex-center">
    <q-list class="custom-list">
      <div class="relative-position full-height">
        <feature-button v-for="(navi, index) in manufacturingNavi" :key="index" :nav="navi" buttonText="sample" />
      </div>
    </q-list>
    <div class="row q-gutter-x-md justify-between full-width q-px-xs">
      <div class="col-auto relative-position full-height self-center">
        <p class="text-h4">What can I do<br/> with this app?</p>
      </div>
      <div class="col-8">
        // must change only this part of page via router view but this transition doesn't work..
        <router-view ref="feature" v-slot="{ Component, route }">
          <transition name="fade-transform" mode="out-in">
            <component :is="Component" :key="route.path" />
          </transition>
        </router-view>
      </div>
    </div>
  </q-page>
</template>

child routes of features page work but not as expected. I expect that when I click one of child routes, only child route's component (that part of page) changes with its transition property. When child route clicked parent routes transition works (whole page changes). When I remove transition from child router view, nothing changes. It behaves like child router view doesn't exist. Where is my mistake?

I use vue 3 and vue router 4. Thank you.

I tried to explain by visualizing below.

Answer 1

Reason found. Using key attribute on parent router-view (in main layout in my case), always its transition props run. I removed key attributes from all router-views and problem solved.