vue3 使用动态组件component

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

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