Element ColorPicker 颜色选择器绑定值value / v-model差异问题

场景：根据后端返回数据列表，动态生成多个颜色选择器，并在用户设置后，返回颜色选择器设置的值。

1.最初思路

1）请求数据获得列表；
2）v-for循环绑定颜色选择器的value值；
3）绑定change事件，获取用户设置的颜色值。

<ul>
  <li v-for="(color, index) in colorList">
    <el-color-picker :value="color" @change="changeHandle($event, index)"></el-color-picker>
  </li>
</ul>

<script>
  export default{
    data(){
      return{
        colorList: ['#111','#222','#333']
      }
    },
    method:{
      changeHandle(color, index){
        this.colorList[index] = color;
      }
    }
  }
</script>

虽然获取到了用户改变的颜色列表，存在一个问题，颜色选择器改变值后，在屏幕上点击鼠标，颜色选择器显示的颜色变成初始颜色，具体原因不明。

2.使用v-model

1）请求数据获得列表；
2）生成一个对象，该对象的属性用于颜色选择器的双向绑定变量；
3）绑定change事件，获取用户设置的颜色值。

<ul>
  <li v-for="(color, index) in colorList">
    <el-color-picker v-model="colorObj['val'+index]" @change="changeHandle($event, index)">
    </el-color-picker>
  </li>
</ul>

<script>
  export default{
    data(){
      return{
        colorList: ['#111','#222','#333']，
        colorObj: {}
      }
    },
    method:{
      changeHandle(color, index){
        this.colorList[index] = color;
      }
    },
    mounted(){
      this.colorList.foreach((color,index)=> {
        this.$set(this.colorObj, 'val'+index, color);
      });
    }
  }
</script>

颜色选择器使用v-model，未出现设置完颜色后点击空白处出现颜色取消问题。有没有人遇到同样问题，可以解释一下。