Vue version

^3.2.37

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-tdnmyq

Steps to reproduce

in App.vue

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import { shallowRef } from 'vue';
import ComA from './views/ComA.vue';
import ComB from './views/ComB.vue';
const Component = shallowRef(ComA);
</script>

<template>
  <label> <input type="radio" v-model="Component" :value="ComA" /> A </label>
  <label> <input type="radio" v-model="Component" :value="ComB" /> B </label>
  <Transition name="fade" mode="out-in">
    <component :is="Component"></component>
  </Transition>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

views/ComA.vue

<script setup></script>
<template>Comp A</template>

views/ComB.vue

<script setup></script>
<template>Comp B</template>

What is expected?

I hope it works like the example https://sfc.vuejs.org/#eNqtk8Fu2zAMhl+F0KUbUFu97OK5AZK9wbCjLorNtCpkSZBoF0GQdx9la4mbDMMO9UmkyO+XzF8nsQ2hnkYUjWhTF00gSEhj2ChnhuAjwQnSq7bWv//EA5zhEP0AD9zxcKn44YewLRu1nKOM/Fiw+1CwKwXKSQljwrUGedCTNz10XOgdOoI9GvcCPWKwR/D7hHHCXrnOu0SgOzITZupS/LyCfZlP81W5Vi6343txQDgEqwlzRK3Ve7S8BP5a48JIQMeAz0pE3RuvBEzV4Hu0nLkR471m0nbMxbOUEhvYZlQrr9jPVNhlhd2dwq+oXTJkvAOnh1x80D1yc8Zy5EeqjOPecojrv21M+pvqppWXmkVCXjU40cr1T3RtoqPNyzrrVtyEsVqgj3+SFvWEJQmnzKQLsQEfdGfoCE/1twSoE35X7pzRa2L20A2P7TKzSn8DT0sjT3w+kngUiw2rQYf6LXnHXp87VNlISjQLI+fYmDlW4pUopEbKdOiyW99S7eOL5FUdR0dmwBrTUO2jf2c/MlgJPtmFIWeTxiqi6zFi/BfzpvSOm7F8ozNf5fK68oNdTYDn05upTPf6FooVl63VyAppfob/RyqWuyedfwOayXqo

What is actually happening?

if use "out-in" no next components come in

<Transition name="fade" mode="out-in">
 <component :is="xxx"></component>
</Transition>

but use "in-out" its working

<Transition name="fade" mode="in-out">
 <component :is="xxx"></component>
</Transition>

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700KF
    Memory: 16.47 GB / 31.82 GB
  Binaries:
    Node: 16.15.0 - E:\environment\nodejs\node.EXE
    Yarn: 1.22.18 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.5.5 - E:\environment\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (103.0.1264.71)
    Internet Explorer: 11.0.22000.120

Any additional comments?

No response