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;
      }