我有以下组件：

<script setup>

import {computed, onMounted, ref, watch} from "vue";
import {useDialogStore} from "@/store/dialog";
import TableSwitcher from "@/components/Dialogs/Components/TableSwitcher.vue"

let emit = defineEmits(['confirmDialogConfirmed', 'confirmDialogClose'])
let dialogStore = useDialogStore()

let question = computed(() => dialogStore.dialogQuestion)
let mainComponent = ref('')

let props = defineProps({
  open: {
    type: Boolean,
    required: true
  },
  id: {
    type: String,
    default: 'main-dialog'
  },
  component: {
    type: String,
    required: true,
  }
})

watch(props, (newValue, oldValue) => {

    mainComponent.value = props.component

    console.log(mainComponent);

      if(newValue.open === true)
      {
        dialog.showModal()
      }

    },
    {
      deep:true
    }
);

let dialog = ref();

let closeDialog = (confirmAction = false) =>
{
  dialog.close()
  dialogStore.close(confirmAction)
}

onMounted(() => {
  dialog = document.getElementById(props.id);
});

</script>

<template>
  <dialog :id="id">
    <component :is="mainComponent" ></component>
  </dialog>
</template>

为了激活组件，我使用以下命令：

<main-dialog
    v-if="component"
    :component="component"
    :open="true">
</main-dialog>

组件值在单击时创建，并作为 prop 传递给主组件。当我单击激活此组件时，收到以下错误：
一月一日

当我为mainComponentvar硬编码组件名时，组件被正确加载。我在这里做错了什么？