javascript - Vuejs 2:根据第一个更改第二个选择列表

我想根据第一个选择列表中的选定值更改第二个选择列表。当我为每个select做了两个vue实例时，它起作用了，但我想做一个小应用，这样它就更干净了。
json数组需要在vue js之外。你可以在小提琴上看到。
不知怎么的，我就是不知道如何更新第二个选择列表。
在我做这样的事情之前，它工作得很好：

// methods of first select (category)
methods: {
  update: function (value)
     this.options = types[value]
  }
}

...

// methods of second select (typselect)
methods: {
  onChange(event) {
    typselect.update(event.srcElement.value)
  }
}

应用程序：

<div id="app">

  <select v-model="category" v-on:change="onChange">
    <option>Choose</option>
    <option value="5">type1</option>
    <option value="6">type2</option>
    <option value="11">type3</option>
  </select>

  <select id="typselect">
    <option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option>
  </select>

</div>

所以我把它换成这样：

new Vue({
  el: '#app',

  data: {
    category: '5'
  },

  computed: {
    options: function(event) {
      console.log('should be called on change');

      let options = ''
      options = 1;
      //  options = types[event.srcElement.value]; // this would be so easy...
      return options
    }
  },

  methods: {
    onChange: function(e) {
      console.log(event.srcElement.value);
      this.options = this.options
    }
  }
})

但我不知道如何更新第二个选择列表。
来了一把小提琴：
https://jsfiddle.net/Honkoman/g9g5uukr/2/

最佳答案

你的电脑应该是这样的。

computed: {
  options: function(event) {
    return types[this.category]
  }
},

更新了fiddle。