关于前端:elselect手动设置vmodel后下拉框聚焦的选中项没有马上发生改变

<template>
  <div>
    <el-button type="success" icon="el-icon-check" circle @click="change"></el-button>
    <el-select v-model="value" placeholder="请抉择">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      options: [
        {
          value: "选项 1",
          label: "黄金糕",
        },
        {
          value: "选项 2",
          label: "双皮奶",
        },
        {
          value: "选项 3",
          label: "蚵仔煎",
        },
        {
          value: "选项 4",
          label: "龙须面",
        },
        {
          value: "选项 5",
          label: "北京烤鸭",
        },
      ],
      value: "",
    };
  },
  methods: {change(){this.value = this.options[4].value;
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-select-dropdown__item.hover {color: #ffcf44;}
</style>

如图，选中第二项


点击按钮，设置 v -model 绑定的 value 为第五项

关上下拉框

聚焦的选项还是旧的选中项；
然而敞开下拉框再次关上之后，聚焦选项就正确了。另外，在关上下拉框的时候点击按钮，下拉框会敞开，再次关上也是正确的后果。

尽管不是什么大问题，然而好膈应啊，怎么解决