使用elementUI中级联选择器遇到的问题TypeError: Cannot read property ‘level‘ of null

在用elementUI中的Cascader 级联选择器组件时，遇到的bug; TypeError: Cannot read property 'level' of null  ; 

先说我如何操作时出现的该bug : 有一个重置的按钮，可以清空筛选条件，包括年级条件都想清空，点击重置按钮的时候，我把该组件的v-model绑定的值设置成了空数组，就报这个错了；

我使用Cascader 级联选择器组件并加载数据后的样子如下所示：

该组件在项目中多处使用，所以我又封装了一次，封成了一个组件，其他文件可以单独引用，减少代码冗余，该组件代码如下：

<template>
  <div class="">
    <el-cascader
      collapse-tags
      :key="isResouceShow"
      style="width: 100%"
      v-model="grades"
      :options="gradeData"
      :props="{ multiple: true }"
      clearable
    ></el-cascader>
  </div>
</template>
<script> 
export default {
  data() {
    return {
      grades: [], // 已经选择的年级
      isResouceShow:0 // 绑定key值
    };
  },
  props: {
    gradeData: {// 父组件传递过来的所有选项数据
      type: Array,
      default: [],
    },
  },
  watch: { 
    grades: {
      handler(v1, v2) {  
        let gradeArr = []; // 年级id 
        let gradeNameArr = []; // 年级名字
        if(v1&&v1.length>0){
          v1.forEach((item) => {
            gradeArr.push(item[item.length - 1]);
          }); 
          this.gradeData.forEach(i =>{
            i.children.forEach(j =>{
              gradeArr.forEach(k=>{
                if(j.value === k){
                  gradeNameArr.push(j.label);
                }
              })
            })
          })
        }else{
          ++this.isResouceShow ;
        } 
          let obj = { gradeArr,gradeNameArr };
          this.$emit("returnGrade", obj); // 将数据传递给父组件
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>
<style lang="less" scoped>
</style>

说一下代码大体意思：data中的grades 是当前已经选择了的数据项；props 中的gradeData 是从父组件中传递过来的数据，是级联选择器中的数据项；后台需要的数据只是二级中的数据的id,所以我监听了一下grades，选取了我需要的数据，并向数据传递给父组件；当父组件点击重置按钮的时候，我直接执行 this.$refs['grade'].grades = [] ; 所以就报错了，所以给组件设置了一个 :key="isResouceShow" ，在监听grades时，当数据为空数组时，也改变了一下 isResouceShow 的值，以便组件能重新渲染；这样就不报错了