Два поля мультиселекции на одной странице повреждены, vue multiselect

Я использую это решение vue.js для раскрывающегося меню мультиселектора. Я пытаюсь иметь два поля multiselect на одной странице. Они отражают разные наборы данных. Однако выбор во втором поврежден.

<div id="app">
  <multiselect 
    placeholder="Select"
    v-model="value" 
    :options="options"
    :multiple="true"
    track-by="language"
    label="language"
    >
  </multiselect>
  <pre>{{ value }}</pre>

  <multiselect 
    placeholder="Select"
    v-model="value2" 
    :options="options2"
    :multiple="true"
    track-by="language"
    label="language"
    >
  </multiselect>
  <pre>{{ value2 }}</pre>
</div>

Vue.js:

new Vue({
  components: {
    Multiselect: window.VueMultiselect.default
    },
    data: {
    value: {language: 'aaa'},
    options: [
      { language: 'aaa'},
      { language: 'bbb'},
      { language: 'ccc'}
    ],
    options2: [
    {   language: '111'},
      { language: '222'},
      { language: '333'}
    ]
    },
  methods: {
    onSelect (items, lastSelectItem) {
      this.items = items
      this.lastSelectItem = lastSelectItem
    },
    // deselect option
    reset () {
      this.items = [] // reset
    },
    // select option from parent component
    selectOption () {
      this.items = _.unionWith(this.items, [this.options[0]], _.isEqual)
    },
  }
}).$mount('#app')

Попробуйте здесь: скрипка

Как я могу заставить обе мультиселекции работать отдельно друг от друга?

EDIT: решение

javascript,vue.js,multi-select,

0
Яндекс.Метрика