element-ui多选框组件切换报错问题

问题描述：页面定义了三个多选框，根据不同的条件展示不同的<div>下的多选框，但是由班级切换到课程的时候页面报错。

页面源码如下：

<div v-if="formModel.radio == 2" >
      <el-form-item prop="class" :label="$t('system.count.class')">
        <el-select v-model="formModel.classByClass" clearable @change="classByStudentChange">
          <el-option
            v-for="item in classOptions"
            :key="item.classNo"
            :value="item.classNo"
            :label="item.className"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="course" :label="$t('system.count.course')">
        <el-select
          v-model="formModel.courseByClass"
          multiple
          filterable
          clearable>
          <el-option
            v-for="item in courseOptions"
            :key="item.courseId"
            :label="item.courseName"
            :value="item.courseId"></el-option>
        </el-select>
      </el-form-item>
    </div>
    <div v-if="formModel.radio == 3">
      <el-form-item prop="course" :label="$t('system.count.course')">
        <el-select v-model="formModel.courseBycourse" clearable multiple filterable>
          <el-option
            v-for="item in courseOptions"
            :key="item.courseId"
            :label="item.courseName"
            :value="item.courseId"></el-option>
        </el-select>
      </el-form-item>
    </div>

排查发现只要加上multiple属性就会报错，百度筛查发现是因为selection在单选切换多选的时候数据类型由字符切换成数组类型导致的TypeError，但是这明明是两个多选框为什么会出现这种情况呢？

我想起来在VUE的风格指南中有一段内容

 那么原因就很可能是因为没有加上key导致的相同类型的元素的冲突，于是在每个div上加上key，

<div v-if="formModel.radio == 2" key="class">
...
<div>
<div v-if="formModel.radio == 3" key="course">
...
<div>

这样就没有问题了