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

而後就沒問題了，你們能夠試一下
若是有大佬的話最好解釋一下爲何會出現這種狀況，是異步的緣由還數據沒有被監聽到呢？