新手上路~VUE3+Element-PLUS dialog弹出框重置表单不生效问题

遇到问题：添加操作，dialog弹出框里面的表单 清空不生效！！！

• 父组件 核心代码

<tempalte>
    <roleDialog ref="roleDialogRef" @refresh="getTableData()"/>
</template>
<script setup lang="ts">

// 打开新增弹窗
import {defineAsyncComponent, ref} from 'vue';
const roleDialogRef = ref();
// 引入组件
const roleDialog = defineAsyncComponent(() => import('/@/views/system/organization/roleJurisdiction/dialog.vue'));
const onOpenAddPerson = (type: string) => {
  roleDialogRef.value.openDialog(type);
};
// 打开修改弹窗
const onOpenEditDic = (type: string, row: RowRoleJurisdictionType) => {
  roleDialogRef.value.openDialog(type, row);
};
</script>

• 子组件 核心代码

<script setup lang="ts">
const state = reactive({
  ruleForm: {
    name: '', // 角色名称
    roleCode: '', // 角色编码
    description: '',	// 角色描述
  },
})
// 打开弹窗
const openDialog = (type: string, row: RowRoleJurisdictionType) => {
  if (type === 'edit') {
    state.ruleForm = {...row};  // 对象解构赋值
    state.dialog.title = '修改角色';
    state.dialog.type = 'edita';
    state.dialog.submitTxt = '修 改';
  } else {
    state.dialog.title = '新增角色';
    state.dialog.type = 'add';
    state.dialog.submitTxt = '新 增';
    nextTick(() => {
      roleDialogRef.value.resetFields(); // 清空表单
    });
  }
   state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
};
</script>

思考问题：我父组件是通过子组件的ref调用子组件的打开、关闭弹窗方法
我先点击新增，在点击修改，再次点击新增正常。
如果先点击修改，在点击新增，新增里面就会有数据回显，可能是因为点击编辑的时候，已经给表单赋值了导致初始值已经有值了，所以我再次点击新增的时候 调用了清空表单的方法 也一样导致数据回显了

解决问题：中途尝试在关闭dialog弹窗的时候清空表单，也会概率性的出现表单未清空的情况。 官方文档解释：

重要：数据回显 用 nextTick 包裹解决问题！

// 打开弹窗
const openDialog = (type: string, row: RowRoleJurisdictionType) => {
  if (type === 'edit') {
    state.dialog.title = '修改角色';
    state.dialog.type = 'edita';
    state.dialog.submitTxt = '修 改';
    nextTick(() => {  // 重要！！！
      state.ruleForm = {...row};
    })
  } else {
    state.dialog.title = '新增角色';
    state.dialog.type = 'add';
    state.dialog.submitTxt = '新 增';
    nextTick(() => {
      roleDialogRef.value.resetFields(); // 清空表单
    });
  }
  state.dialog.isShowDialog = true;
};