如何使用嵌套对象填充Vue下拉菜单

new Vue({
  data: {
    options: {
      fruits: ['Apple', 'Banana', 'Orange'],
      vegetables: ['Carrot', 'Broccoli', 'Lettuce'],
      drinks: ['Water', 'Coffee', 'Tea']
    }
  }
});

<select>
  <option v-for="(items, category) in options" :key="category" :value="category">{{ category }}</option>
</select>

<select v-model="selectedCategory">
  <option v-for="(items, category) in options" :key="category" :value="category">{{ category }}</option>
</select>

new Vue({
  data: {
    options: {
      fruits: ['Apple', 'Banana', 'Orange'],
      vegetables: ['Carrot', 'Broccoli', 'Lettuce'],
      drinks: ['Water', 'Coffee', 'Tea']
    },
    selectedCategory: ''
  },
  watch: {
    selectedCategory: function(newCategory) {
      // 根据选中的分类更新下拉菜单的选项
      // 可以使用computed属性或方法来生成新的选项列表
    }
  }
});