vue3项目中组件切换不起作用

以下这种方式写页面中组件切换，不起作用。

<component :is="steps[compIndex].comp" />

解决：使用shallowReactive或者shallowRef把对应的组件名称重新定义下。

<component :is="compNames[steps[compIndex].comp]" />
<el-button v-for="(item,index) in boxes" @click="compIndex = index">点击切换组件</el-button>

<script setup lang="ts">
import comp1 from './components/comp1.vue'
import comp2 from './components/comp2.vue'
const boxes = [{title:'标题1',comp:'comp1'},{title:'标题2',comp:'comp2'}]

const compIndex = ref(0)
type compName = {
    [key:string]:any
}
const compNames = shallowReactive<compName>({comp1,comp2})
</script>

不清楚还有没有其它解决办法，暂时就这样吧！