problem with vue3 animation when using dynamic component

Question

I want to add animation for two components ,

this is my code :

let activeComponent = ref('Login')

</script>

<template>

  <Transition name="fade" mode="out-in">
    <component :is="activeComponent" @toggle="activeComponent = $event"></component>
  </Transition>

</template>

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

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

But it display nothing at all ,

what's the problem ?