组件key

在写代码时遇到一个小问题，代码模拟如下：

  <div>
    <el-radio-group v-model="value">
      <el-radio-button label="1">张三</el-radio-button>
      <el-radio-button label="2">李四</el-radio-button>
      <el-radio-button label="3">王五</el-radio-button>
    </el-radio-group>

    <div>
      <dictSelect v-if="1 == value" v-model="value2" :options="options1" @change="change1"></dictSelect>
      <dictSelect v-if="2 == value" v-model="value2" :options="options2" @change="change3"></dictSelect>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      value2: '',
      dataKey: new Date().getTime(),
      options1: [
        { key: '1', value: '编号：316165390658961408 暂无证件号' },
      ],
      options2: []
    }
  },
}
</script>

dictSelect是自己封装过的el-select组件，里面有一个功能是如果options有值，会自动选中第一个值并触发change事件
问题如下：value从张三切换到李四时，options2为空，在组件中查看数据options取到的值也是为空，但是组件会把options1的值渲染出来，如下图所示：

问题
这种问题好解决嘛，加个key就好了。我想dictSelect组件一次只会加载一个，我就没必要在每个dictSelect上都加key了，直接在父元素上加一个key好了，代码如下：

<div :key="dataKey">
  <dictSelect v-if="1 == value" v-model="value2" :options="options1" @change="change1"></dictSelect>
  <dictSelect v-if="2 == value" v-model="value2" :options="options2" @change="change3"></dictSelect>
</div>

以上代码，同时在value值切换时更新key，但是这样会出现组件加载时选中第一个值会触发一次change事件，key更新时组件更新会再次触发change事件，导致change事件触发两次的问题
解决以上问题只需要，把key加到每个组件上就ok了，并且key不需要使用动态key，只需要使用固定字符串就可以了
代码如下：

<div>
  <dictSelect key="dictKey1" v-if="1 == value" v-model="value2" :options="options1" @change="change1"></dictSelect>
  <dictSelect key="dictKey2" v-if="2 == value" v-model="value2" :options="options2" @change="change3"></dictSelect>
</div>