Vue2中关于数组的组件回显失败

现象

<template>
    <div style="border:1px solid pink;padding:30px 300px 30px 30%;">
      <span>{{ selectData.tip }}</span>
      <el-select v-model="selectData.value" clearable placeholder="请选择">
        <el-option
            v-for="item in selectData.options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-button type="success" @click="addOptionContent">增加下拉框选项</el-button>
    </div>
</template>
    
<script>
  export default {
    components: {
      
    },
    name: "test",
    data() {
      return {
        selectData: {
          tip: "下拉框选项：",
          value: "",
          options: [
            { value: '0', label: '双皮奶' }, 
            { value: '1', label: '蚵仔煎' }, 
            { value: '2', label: '龙须面' }, 
            { value: '3', label: '北京烤鸭' }
          ]
        }
      };
    },
    watch: {},
    mounted() {},
    beforeCreate() {},
    created() {},
    methods: {
      addOptionContent() {
        this.selectData.options[4] = { value: '4', label: '潮汕火锅' };
        console.log(this.selectData.options);
      }
    },
  };
</script>
<style scoped></style>

效果：

解决方法

使用this.$set解决问题

addOptionContent() {
    this.$set(this.selectData.options, 4, { value: '4', label: '潮汕火锅' })
    console.log(this.selectData.options);
}

Vue2中=赋值为啥不生效

官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue2 无法探测普通的新增属性