vue-表单中嵌套动态数组的校验及去除校验提示

场景：

业务需求是整个表单的内容都是数组中的一个对象，data如下,

<template>
<el-form ref="formData">
<div v-for="(singleFormData,index) in formData.formDataList" :key="index">
    <el-form-item label="名称" :prop="`formDataList[${index}].name`" :rules="rules.name">
         <el-input v-model="singleFormData.name" placeholder="请输入名称" >
        </el-input>
    </el-form-item>
</div>
<div class="drawer-footer" >
   <el-button size="small" @click="visable = false">取 消</el-button>
   <el-button size="small" type="primary" @click="save()">保 存</el-button>
 </div>
</el-form>
</template>

 data() {
        return {
                formData: {
                    formDataList: [{
                        name: '',
                        nameEn: '',                       
                        remark: '',
                    }],
                },
                 rules: {
                    name: [{
                            required: true,
                            message: '请输入名称',
                            trigger: 'blur'
                        },
                        {
                            min: 3,
                            max: 30,
                            message: '长度在3到30之间',
                            trigger: 'blur'
                        }
                    ],
                },

}
 methods: {
        addDialog() {
  
//如果有多个表单，需要分开清除，不要写在一些，避免相互影响
                this.$nextTick(() => 
                    {

                        if(this.$refs['formData']){
                            this.$refs['formData'].clearValidate();
                        }
                        if(this.$refs['formData2']){
                            this.$refs['formData2'].clearValidate();
                        }
                    }
                )
//不要像以下格式写

             this.$nextTick(() =>  this.$refs['formData','formData2'].clearValidate())



            },
    }