多个el-select下拉框无法选中相同内容

效果图展示

完整代码部分

<template>
  <div class="hello">
    <div v-for="(item, index) in colorList" :key="index" style="float: left">
      <span>{{item.name}}：</span>
      <el-select v-model="item.value" clearable placeholder="请选择" size="small" @change="changSelect">
        <el-option v-for="it in options" :value="it.value" :key="it.value" :label="it.label" :disabled="it.disabled"></el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      colorList: [
        {value: '', name: '红灯'},
        {value: '', name: '黄灯'},
        {value: '', name: '绿灯'},
        {value: '', name: '蓝灯'},
        {value: '', name: '白灯'}
      ],
      options: [
        {label: '数据111', value: 1, disabled: false},
        {label: '数据222', value: 2, disabled: false},
        {label: '数据333', value: 3, disabled: false},
        {label: '数据444', value: 4, disabled: false},
        {label: '数据555', value: 5, disabled: false}
      ]
    }
  },
  methods: {
    changSelect () {
      // 初始化选项都为可选
      this.options.forEach((ele) => {
        ele.disabled = false
        this.colorList.forEach((element) => {
          if (element.value === ele.value) ele.disabled = true
        })
      })
    },
  }
}
</script>