关于javascript:Vue重置表单TypeError-Cannot-read-property-resetFields-of

在应用elementUI时遇到的谬误，在网上找了很久，解决办法都没用，官网文档也不够具体。

场景

在对话框敞开或者勾销时要重置表单，而Vue编译不通过，网上说是因为form表单未渲染进DOM，导致找不到此表单对象，导致：
"TypeError: Cannot read property 'resetFields' of undefined"
网友提供的解决办法：
如果是第一次非空验证一下：

          if (this.$refs['dictForm'] !== undefined) {
              this.clearForm();//封装了清空操作
          }

或者利用Vue的自带个性（DOM渲染后执行)：

        this.$nextTick(()=>{    
        this.$refs.addForm.resetFields(); })

本次解决

试过上述计划后还是没用，那么大概率是代码设计有问题了。
官网提供了一个close的函数（摘自官网）：

before-close 仅当用户通过点击敞开图标或遮罩敞开 Dialog 时起效。如果你在 footer 具名 slot 里增加了用于敞开 Dialog 的按钮，那么能够在按钮的点击回调函数里退出 before-close 的相干逻辑。

因为我了解谬误，将close函数与before-close属性混用，导致Vue编译不通过，下边间接贴上代码：
Vue代码：

      <el-dialog
        :title="title"
        :close-on-click-modal="false"//避免正点退出
        :visible.sync="centerDialogVisible"//管制是否显示
        @close="clearForm"//对话框右上角自带的敞开按钮事件
        width="30%"
        center
        >

Js代码：

      clearForm()｛
        //暗藏对话框
        this.centerDialogVisible = false;
        //表单验证还原
        if (this.$refs['bookForm'] !== undefined) {
           this.$refs['bookForm'].resetFields();
        }else{
          this.$nextTick(()=>{
            this.$refs['bookForm'].resetFields();
          });
        }
        //还原可编辑
        this.flag = false;
      }