引入 Transition 和 TransitionGroup 组件不生效

在使用vue3时，在component里，定义了 Transition .vue 和 TransitionGroup.vue 进行过渡组件和过渡列表测试

Transition .vue：

<template>
    <div class="content">
        <button @click="flag = !flag">切换</button>
        <transition name="fade" @before-enter="Enterfrom">
            <div v-if="flag" class="box"></div>
        </transition>
    </div>
    <TransitionGroupVue />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import TransitionGroup from './TransitionGroup.vue'; 

const flag = ref<boolean>(true)
const Enterfrom = (el: Element) => {
    console.log('进入之前的生命周期')
}
</script>

TransitionGroup.vue ：

<template>
    <div class="wraps">
        <transition-group>
            <div class="item" v-for="item in list" :key="item">{{ item }}</div>
        </transition-group>
    </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

const list = reactive<number[]>([1, 2, 3, 4, 5])
</script>

但是，当引入组件进行使用时，页面却没有渲染出来，也没有任何报错或提示：

import Transition from './Transition.vue'; // 引入的组件不生效，页面没有渲染
import TransitionGroup from './TransitionGroup.vue'; // 引入的组件不生效，页面没有渲染

原因：transition 和 transition-group 都是内置组件，不能直接使用它们作为组件名，必须改为其他名字

解决：

import TransitionVue from './Transition.vue'; 
import TransitionGroupVue from './TransitionGroup.vue';