vue3 使用动态组件component

<template>
  <div @click="change">自由浏览</div>
    <component
      :is="CurrentCompoent[current]"
    ></component>
</template>

import { defineAsyncComponent, markRaw, reactive, ref } from 'vue';
import TablePage from './components/TablePage/index.vue';
import DetailPage from './components/DetailPage/index.vue';
const CurrentCompoent = reactive({
  TP: markRaw(TablePage),
  DP: markRaw(DetailPage)
})
const current = ref('DP')
const change = () => {
  if(current.value === "DP") {
     current.value = 'TP'
  } else if(current.value === "TP") {
    current.value = 'DP'
  }
}