<TransitionGroup> not working with <PortalTarget> when <Portal> is component root in Vue 3

[samueleiche]

Problem: When the <Portal> component is the root component in another component, then the transition is not applied when it is rendered. Here's representational code:

 // Modal.vue
<template>
    <Portal to="modals">
        <div class="modal" :key="id">
             ...
        </div>
    </Portal>
</template>

 // Index.vue
<template>
    ....
    <PortalTarget name="modals" multiple>
        <template #wrapper="nodes">
            <TransitionGroup name="modal-transition">
                <Component v-for="node in nodes" :key="node.key" :is="node" />
            </TransitionGroup>
        </template>
    </PortalTarget>
</template>

Expected: When the modal is mounted, then I expect it to transition in and transition out when unmounted.

Actual: No transition is applied when the component is mounted/unmounted.

I found that by moving the <Portal> out of the component, the transitions starts working. But I wouldn't want to have this much repeated code.

 // SomeComponent.vue
<template>
    <Portal to="modals">
        <Modal v-if="show" />
    </Portal>
</template>

Reproduction: I made a Codepen with the not working transition. The working example is commented out as well.

Any help is appreciated!