Vue 3 transition with dynamic component does not allow multiple root objects in child component

Question

I use a Vue component as "layout" to be able to load dynamic content in using the router view with a slot. This component is surrounded with a transition component to allow smooth transitions between pages. This works fine:

<template>
  <AppLayout>
    <router-view v-slot="{ Component }">
      <transition name="slide" mode="out-in"> <component :is="Component" /> </transition>
    </router-view>
  </AppLayout>
</template>

The component which needs to be shown is stated in the router config using the component property:

export const routes = [
  {
    path: "/",
    component: Intro,
    meta: {
      layout: "AppLayoutDefault",
    },
  }
]

This works fine, however when I use multiple root tags in a component this breaks, i.e.:

<template>
  <ComponentA />
  <ComponentB />
</template>

<script>
export default defineComponent({
  name: "Intro",
  components: {
      ...
  }
});
</script>

The error shown is: [Vue warn]: Component inside renders non-element root node that cannot be animated. And the new page is not displayed.

I understand I can fix the transition be surrounding the 2 components in one surrounding div, however I would like to understand exactly why the current set-up does not work and am hoping for a better solution.