vue3 添加自定义弹窗组件

vue3 添加弹窗组件 总是报错还不显示，在网上找了很多办法 如下办法可行。

<template>
// 引入的弹窗
 <dialogDetail v-model:visible="innerVisible" ref='dialogDetail'></dialogDetail>
</template>
<script>
import { defineAsyncComponent, defineComponent } from "@vue/runtime-core";
export default defineComponent({
  name: "Index",
  components: {
    dialogDetail: defineAsyncComponent(() =>
      import("../xxxx") // 组件地址
    ),
  },
});
</script>

// 弹窗组件
<template>
   <el-dialog
    width="961px"
    title="xxx"
    :model-value="visible"
    :append-to-body="true"
    :show-close="false"
  ></el-dialog>
</template>
<script setup>
const props = defineProps(["visible"]);
</script>