VueJs Transition Not working as Dynamic component

https://stackoverflow.com/questions/64062548/vuejs-transition-not-working-as-dynamic-component

by sarangnx

HTML

<script src="https://unpkg.com/vue@next"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

<div id="app">
  <div class="flex">
    <!-- Vue transition is used directly. It is working --> 
    <transition
      enter-active-class="animate__animated animate__fadeInDown"
      leave-active-class="animate__animated animate__fadeOutUp"
    >
      <div v-if="show">Transition working</div>
    </transition>
  
    <!-- 
      This uses transition in a seperate component,
      but does not use dynamic component. `<component :is="">`
    --> 
    <fade-in-working>
      <div v-if="show">Transition working</div>
    </fade-in-working>
  
    <!-- This Component is not working as expected --> 
    <fade-in>
      <div v-if="show">Transition not working</div>
    </fade-in>
  </div>

  <button @click="show = !show">Click Me</button>
</div>

CSS

.flex {
  display: flex;
}

Vue

const app = Vue.createApp({
	data() {
		return { show: false }
	},
});

app.component('fade-in', {
  props: {
  	group: Boolean,
  },
	template: `
  	<component 
    	:is="group? 'transition-group': 'transition'" 
      enter-active-class="animate__animated animate__fadeInDown"
      leave-active-class="animate__animated animate__fadeOutUp"
		>
    	<slot></slot>
    </component>
  `
});

app.component('fade-in-working', {
	template: `
  	<transition 
      enter-active-class="animate__animated animate__fadeInDown"
      leave-active-class="animate__animated animate__fadeOutUp"
		>
    	<slot></slot>
    </transition>
  `
});

app.mount('#app');