vue3项目中新增修改时使用nextTick时遇到的问题

前提
页面是个列表页，需要实现增删改查，新增和修改使用表单提交

关键代码如下

// html部分，新增、修改的表单
<el-dialog
    v-model="dialogVisible2"
    :title="addTitle"
    width="600"
    class="update-shujuji-dialog"
  >
    <el-form :model="addForm" :rules="rules" label-width="auto" style="max-width: 600px" ref="formRef">
      <el-form-item label="字典类型" prop="dictType">
        <el-select v-model="addForm.dictType" :disabled="true">
          <el-option :label="item.dictType"
                     :value="item.dictType" v-for="item in selectList" :key="item.dictType"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数据标签" prop="dictLabel">
        <el-input v-model="addForm.dictLabel" placeholder="数据标签"/>
      </el-form-item>
      <el-form-item label="数据键值" prop="dictValue">
        <el-input v-model="addForm.dictValue" placeholder="数据键值"/>
      </el-form-item>
      <el-form-item label="样式属性" prop="cssClass">
        <el-input v-model="addForm.cssClass" placeholder="样式属性"/>
      </el-form-item>
      <el-form-item label="显示排序">
        <el-input-number v-model="addForm.dictSort" controls-position="right" :min="0" :max="1000"></el-input-number>
      </el-form-item>
      <el-form-item label="回显样式">
        <el-select v-model="addForm.listClass">
          <el-option :label="item.label"
                     :value="item.value" v-for="item in huixianStyle" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="addForm.remark"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取消</el-button>
        <el-button type="primary" @click="addDictionaryDataFn">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>

// js部分
 import {onMounted, reactive, toRefs, ref, getCurrentInstance, watch, nextTick } from "vue";
  export default {
    name: "autoLabel",
    components: {},
    setup(props) {
      const formRef = ref(null);
      const state = reactive({
		dialogVisible2: false,
        addForm: {},
        addTitle: '新增字典类型',
        rules: {
	          dictLabel: [
	            { required: true, message: '数据标签不能为空', trigger: 'blur' }
	          ],
	          dictValue: [
	            { required: true, message: '数据键值不能为空', trigger: 'blur' }
	          ]
	        }
		})
	// 修改
      const update = (row) => {
        state.addTitle = '修改字典类型';
        state.dialogVisible2 = true;
        nextTick(() => {
          proxy.$refs.formRef.resetFields();
        })
        let { dictCode, dictLabel, dictType, dictValue, cssClass, dictSort, remark, listClass } = row;
        state.addForm = { dictCode, dictLabel, dictType, dictValue, cssClass, dictSort, remark, listClass }// 修改时回显数据
      }
	}

}

遇到的问题
乍一看以上代码，逻辑上没问题，但是修改数据后，刷新列表，发现，列表数据确实是修改后的了，此时再次点击修改，会发现修改弹框中的数据并没有更新，还是以前的旧数据，很费解。最后才发现问题所在，修改时给表单赋值回显时需要写在nextTick里，如下

// 修改
      const update = (row) => {
        state.addTitle = '修改字典类型';
        state.dialogVisible2 = true;
        nextTick(() => {
          let { dictCode, dictLabel, dictType, dictValue, cssClass, dictSort, remark, listClass } = row;
        state.addForm = { dictCode, dictLabel, dictType, dictValue, cssClass, dictSort, remark, listClass }// 修改时回显数据
          proxy.$refs.formRef.resetFields();
        })
      }
	}