element-ui 中el-select表单不回显和校验不经过的问题

项目中有一个需求，填写表单，有两个相关联的下拉框，要根据部门筛选部门内的人员

当部门切换时，清空负责人里的内容
一开始的写法

<el-form-item label="所属部门" prop="followDepart">
    <el-select v-model="ruleForm.followDepart" @change="departChange">
      <el-option
        v-for="(item,i) in getDepartments"
        :key="i"
        :label="item.name"
        :value="item.id"
      ></el-option>
    </el-select>
  </el-form-item>

 <el-form-item label="负责人" prop="followUser" required>
    <el-select v-model="ruleForm.followUser">
      <el-option
        v-for="(item,i) in headuserList"
        :key="i"
        :label="item.name"
        :value="item.id"
      ></el-option>
    </el-select>
  </el-form-item>

而后在methods里的change方法：

departChange(val) {
// 改变时获取id经过id查询当前部门的人员
  API.getHead(val)
    .then(res => {
      this.headuserList = res.data;
      this.ruleForm.followUser = "" // 置空当前选择的负责人
    })
    .catch(err => {
      console.error(err);
    });
},

后来发现这种写法有bug，切换部门时选择负责人不能回显，而后在其余input输入某个字就当即渲染上去
百度以后好像是由于异步渲染的缘由
在各个博客上的写法 就是在第二级的select中的change事件里写入这个

this.$forceUpdate()

事实证实这个方法是可行的。

当改变部门后，负责人也清空，选择负责人也能够回显。我接着作表单校验，由于这两个选项必填
而后........就悲剧了
发现负责人那一栏已经回显了，但就是过不了非空验证
我感受仍是异步渲染的问题。。。。
数据还没渲染上去就进入表单判断了(我猜的，若是说错了请大佬们在评论区指正[笑脸])

后来试了半天，终于找到解决方法了。
rules那边的表单验证正常写，不用改
须要改的是一级select的change事件。
上代码：

departChange(val) {
      API.getHead(val)
        .then(res => {
          this.headuserList = res.data;
          // 注意！关键就在这个$set的使用，须要用$set把二级select的选项置空
          this.$set(this.ruleForm, "followUser", "");
        })
        .catch(err => {
          console.error(err);
        });
    },

而后就没问题了，你们能够试一下
若是有大佬的话最好解释一下为何会出现这种状况，是异步的缘由还数据没有被监听到呢？