vue+ts+element-plus 父组件调用子组件，子组件为el-dialog，无法弹出子组件？

问题：
使用vue+ts+element-plus练习，在使用el-dialog时遇到问题。
问题1：
是子组件为el-dialog，父组件调用子组件弹出对话框。
因为element-plus中el-dialog的v-model无法赋值为props，即无法直接使用父组件的传值。所以在子组件中增加变量赋值给v-model，watch父组件的传值来改变dialogFormVisible的值，来达到显示、关闭对话框的效果。
问题2:
关闭的时候，在弹窗内部关闭事件里写了控制弹窗开关的属性为false，结果关闭之后就再也打不开了
百度下，应该是弹窗无法自己关闭自己，通过$emit触发父组件中弹窗开关的属性为false就可以解决

父组件：

<dialogForm :dialogFormVisible="config.dialogFormVisible"  :data="config.tableData" @saveBtn="saveBtn"  @close-dialog="config.dialogFormVisible= false"></dialogForm>
const saveBtn=(form:any)=>{
  console.log(form)
  config.dialogFormVisible=false
}

子组件

//html
<el-dialog v-model="config.dialogFormVisible" title="修改详情" width="60%" @close="$emit('close-dialog')">
	 <template #footer>
        <span class="dialog-footer">
          <el-button @click="$emit('close-dialog')">取消</el-button>
          <el-button type="primary" @click="saveBtn"> 保存入库 </el-button>
        </span>
      </template>
    </el-dialog>
//js
const emit = defineEmits(['saveBtn'])
const props=defineProps({
  dialogFormVisible:Boolean,
  data:Array
})
let config=reactive({
    dialogFormVisible:false
  })
 const saveBtn=()=>{
  emit('saveBtn','xxxxxx')
}
watch(() => props.dialogFormVisible,() => {
     config.dialogFormVisible = props.dialogFormVisible;
});