KeepAlive with RouterView nested or not

[joshuaeobrian]

Reproduction

https://play.vuejs.org/#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

Steps to reproduce the bug

1. Go to Link provided in "reproduction"
2. Open inspector to watch the logs
3. This should load the "People" tab by default
4. Click through people and watch logs
   • At this point after a few clicks you can see the page is mounted multiple times (can filter by "##mount")
   • From filtering by suggested you can see 2 mounts triggered by default. I would expect 1.
5. Navigate to "Nested People"
6. Clear console logs
7. Filter console logs by ##Mount if you would like a quick clear picture
8. Click on one of the /nested people
   • You can see a simple click generate 3 on mounts to be triggered. This does not just effect the mount but also doubles the amount of watchers being exposed. (which can be seen by filtering by ##Watch_Active)
   • The Extra pages that are generate do not respect their life cycle hooks of onActivated. if you filter the logs by '##onActivated' you can see all inactive pages trigger the onActivated hook when navigating through pages causing unwanted behavior.

Expected behavior

Expected behavior would be similar to what you see in Vue 2 with KeepAlive on the router. Granted the implementation has changed from between the two.
Vue 2:

<keep-alive max="5">
       <router-view :key="rootRouteKeyComputed" />
</keep-alive>

Vue 3:

<router-view v-slot:default="{ Component, ...props }">
     <keep-alive :max="keepAliveMaxComputed">
            <component :is="Component"
                       :key="routeKey" 
                       v-bind="props"
            />
     </keep-alive>
</router-view>

• When clicking on a page you should only see 1 mount if the page is not cached.
• If the page is cached you should not see any new mounts.
• If the component uses a check for inactive then one would expect the inactive flag to be proper. From provide example you can see onActivated is trigger for "ALL" pages that are cached in that RouterView.

Actual behavior

When using KeepAlive in vue 3 on a RouterView, component creates a new instances triggering new lifecycle hooks and duplicate watches per page cached. In devtools it looks something like the following after a few interactions with the pages.

parent  - inactive
    page - inactive
        child 1 - inactive
        child 2 - inactive
parent  - inactive
    page - inactive
        child 1 - inactive
        child 2 - inactive
        child 3 - inactive
parent
    page
        child 1 - inactive
        child 2 - inactive
        child 3

This is an issue because when a use click on a page it creates a new instance of that page triggering a whole new page to be mounted even i

• New Pages trigger multiple components to be mounted
• When navigating across pages within the same route group onActivated hook is always triggered even if its not the proper keyed component or active page from dev tools (This did not happen in vue 2)

Additional information

This is also probably related to #626 which has been open since Nov 30, 2020