Keep-alive doesn't work with nested router-view

[haiting]

Vue version

3.2.47

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-pzruhm?file=src%2Fviews%2FTestView.vue

Steps to reproduce

• use keep-alive cache the component
  BlankView.vue

 <router-view #="{ Component }" v-if="isRouterAlive">
        <keep-alive>
          <component :is="Component" style="margin: 0 16px" />
        </keep-alive>
      </router-view>

• And the Level 3 routes: basl and bash have common parent components
  TestView.vue

<template>
  <router-view></router-view>
</template>

<script>
export default {
  name: 'TestMyLayout'
}
</script>

• router:

routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    },
    {
      path: '/test',
      component: BlankView,
      children: [
        {
          path: 'test-1',
          component: TestView,
          children: [
            {
              path: 'example',
              component: TestView,
              children: [
                {
                  path: 'basl',
                  name: 'Basl',
                  component: () => import('../views/example/basl/index.vue'),
                  meta: {
                    title: 'basl title'
                  }
                },
                {
                  path: 'bash',
                  name: 'Bash',
                  component: () => import('../views/example/bash/index.vue'),
                  meta: {
                    title: 'bash title'
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]

What is expected?

Cache is working for The Level 3 routes

What is actually happening?

Cache is not working for The Level 3 routes

System Info

No response

Any additional comments?

No response

[Dchih]

You can use

<router-view #="{ Component }">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
 </router-view>

in your Level 3 router view to fix this problem.
but it comes another problem that every level 3 component will invoke onMounted twice
and I don't find the case in keepalive testing cases
should I open another issue to report this problem ?

[edison1105]

@Dchih Please feel free to create a new issue.