elementUI中当form中select选择器中的数据发生改

当选择科目时,获取到试卷列表,试卷才能够被选择
现在要实现的效果是当科目发生改变时,试卷列表也发生改变,需要清空当前选择项

如图,科目改变了,试卷列表的数据也发生改变了

     <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="width: 100%; align-items: center; display: flex;">
        <el-form-item label="所属科目" prop="category" style="width: 50%; float: left;">
            <el-cascader v-model="ruleForm.category" style="width: 70%;" :options="options" :props="{ expandTrigger: 'hover' }" filterable clearable @change="handleChange" />
        </el-form-item>
        <el-form-item label="试卷类型" prop="type_name" style="width: 50%; float: left;">
            <el-select v-model="ruleForm.type_name" placeholder="请选择" style="width: 70%;">
              <el-option v-for="item in typeOptions" :key="item.id" :label="item.type_name" :value="item.id" />
            </el-select>
        </el-form-item>

这是基本数据结构

export default {
    data() {
        return {
            ruleForm: {
               type_name: null,
            },
          typeOptions: [],
          options: [],
     },
     watch: {
        typeOptions: function(newValue) {
          this.typeOptions= newValue;
          this.ruleForm.type_name= null;
     }
  },
},

我监听this.typeOptions中是否有新数据,如果有就让this.typeOptions=新数据,然后清空表单中的旧数据.