如何解决Vue3组合式API模式下动态组件不渲染问题

<template>
  <h3>我是动态子组件A</h3>
</template>
<style scoped>
h3 {
  background-color: blue;
  color: #fff;
}
</style>

<template>
  <h3>我是动态子组件B</h3>
</template>
<style scoped>
h3 {
  background-color: blueviolet;
  color: #fff;
}
</style>

<template>
  <div>
    <h3>组合API模式下动态组件的加载</h3>
    <component :is="CompA" />
    <component :is="CompB" />
  </div>
</template>

<script setup lang="ts">
import CompA from "./CompA.vue";
</script>

<script lang="ts" setup>
<script setup lang="ts">
import CompA from "./CompA.vue";
import CompB from "./CompB.vue";
</script>

</script>

<template>
  <div>
    <h3>组合API模式下使用动态组件名加载子组件</h3>
    <template v-for="comp in compArr" :key="comp.compName">
      <component :is="comp.compName" />
    </template>
  </div>
</template>

<script setup lang="ts">
import CompA from "./CompA.vue";
import CompB from "./CompB.vue";
const compArr = [{ compName: "CompA" }, { compName: "CompB" }];
</script>

// 专门定义一个选项式api模块，来注册组件
<script lang="ts">
import { defineComponent } from "vue";
import CompA from "./CompA.vue";
import CompB from "./CompB.vue";
export default defineComponent({
  components: { CompA, CompB }
});
</script>

<script setup lang="ts">
const compArr = [{ compName: "CompA" }, { compName: "CompB" }];
</script>