Transition and conditionally KeepAlive can't work at the same time with a <div> as child component of Transition

[wtto00]

Reproduction

https://codesandbox.io/p/sandbox/nostalgic-bardeen-jvmjpv?file=%2Fsrc%2FApp.vue%3A30%2C38

Steps to reproduce the bug

  <!-- keep-alive doesn't work -->
  <RouterView v-slot="{ Component, route }">
    <Transition name="fade">
      <div :key="route.fullPath" class="w-full h-full">
        <KeepAlive>
          <component
            :is="Component"
            v-if="route.meta.keepAlive"
            :key="route.fullPath"
          />
        </KeepAlive>
        <component :is="Component" v-if="!route.meta.keepAlive" />
      </div>
    </Transition>
  </RouterView>

  <!-- remove key in div, keep-alive works, but transition doesn't work -->
  <RouterView v-slot="{ Component, route }">
    <Transition name="fade">
      <div class="w-full h-full">
        <KeepAlive>
          <component
            :is="Component"
            v-if="route.meta.keepAlive"
            :key="route.fullPath"
          />
        </KeepAlive>
        <component :is="Component" v-if="!route.meta.keepAlive" />
      </div>
    </Transition>
  </RouterView>

Because the <Transition> component must have only one child element, and my routing component contains multiple root elements, So i have to add a <div> element in <Transition> component.

I need the <keep-alive> condition to work, not all routed pages need to cache data.

Expected behavior

• <keep-alive> can take effect conditionally.
• <transition> works well.
• Allows my routing component to contain multiple root elements.

Actual behavior

<keep-alive> and <transition> cann't work at the same time.

Additional information

No response