出现的问题

在data中定义了groups对象，其中每一个属性双向绑定一个下拉框，来确定选中的值，它的内容是从是从后台获取的。
如果直接通过赋值，那么网页上的下拉框是无法选中的

代码中定义

data() {
  return {
    groups: {},
  } 
}

直接赋值

async fetchData() {
      let resp = await axios.get("/category");
      this.groups['a下拉框'] = resp.data['a下拉框'];
      this.groups['b下拉框'] = resp.data['b下拉框'];
    },

经过动态加载后应该这样

groups: {
  'a下拉框': 1,
  'b下拉框': 1,
},

虽然groups中已经有了数据，但是下拉框并不能点击，说明我们的双向绑定出了问题

解决方案

原因

因为 Vue 无法探测普通的新增属性。在实例创建之后添加新的属性到实例上，它不会触发视图更新。Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

通过Vue.$set() 解决

Vue.$set() 向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。

async fetchData() {
      let resp = await axios.get("/category");
      this.$set(this.groups, 'a下拉框', resp.data['a下拉框']);
      this.$set(this.groups, 'b下拉框', resp.data['b下拉框']);
    },

通过这样的方法，实现了新增属性的双向绑定，并且触发了视图更新，并且下拉框也可以正常使用了。