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