elementUI中当form中select选择器中的数据发生改变时清空当前选中的状态

当选择题库时,获取到章和节的列表,章节才能够被选择
现在要实现的效果是当题库发生改变时,章节列表也发生改变,需要清空当前选择项

如图,题库改变了,章节列表的数据也发生改变了

<el-form ref="form" :model="form" label-width="50px" :rules="rules">
	<el-form-item label="章节:">
		<el-select v-model="form.section" style="margin-right:20px" @change="sectionChange">
		    <el-option
		      v-for="item in section"
		      :key="item.pointId"
		      :label="item.pointName"
		      :value="item.pointId"
		    ></el-option>
		  </el-select>
		  <el-select v-model="form.festival" @change="festivalChange">
		    <el-option
		      v-for="item in festival"
		      :key="item.pointId"
		      :label="item.pointName"
		      :value="item.pointId"
		    ></el-option>
		  </el-select>
	</el-form-item>
</el-form>

这是基本数据结构

export default {
	data() {
		return {
			form: {
		        section: null,
		        festival: null
	      	},
	      section: [],
     	  festival: [],
     },
     watch: {
	    section: function(newValue) {
	      this.section = newValue;
	      this.form.section = null;
	      this.form.festival = null;
	 }
  },
},

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