Use Select2 Multiple - with vueJS2

Is there any good way to use the Select2 Plugin for select Multiple field with VuesJS2

I found this

https://v2.vuejs.org/v2/examples/select2.html

but this is only single Select but i don't get it how to bring it to a multiple select and outputting the array of selected items.

Vue.component('select2', {
  props: ['options', 'value'],
  template: '#select2-template',
  mounted: function () {
    var vm = this
    $(this.$el)
      .val(this.value)
      // init select2
      .select2({ data: this.options })
      // emit event on change.
      .on('change', function () {
        //vm.$emit('input', this.value)
        //vm.$emit('input', this.value)
        vm.$emit('input', this.value)
      })
  },
  watch: {
    value: function (value) {
      // update value
      $(this.$el).select2('val', value)
    },
    options: function (options) {
      // update options
      $(this.$el).select2({ data: options })
    }
  },
  destroyed: function () {
    $(this.$el).off().select2('destroy')
  }
})

var vm = new Vue({
  el: '#el',
  template: '#demo-template',
  data: {
    selected: [],
    options: [
      { id: 1, text: 'Hello' },
      { id: 2, text: 'World' }
    ]
  }
})

html, body {
  font: 13px/18px sans-serif;
}
select {
  min-width: 300px;
}

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/css/select2.min.css">
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="el"></div>

<!-- using string template here to work around HTML <option> placement restriction -->
<script type="text/x-template" id="demo-template">
  <div>
    <p>Selected: {{ selected }}</p>
    <select2 :options="options" v-model="selected">
      <option disabled value="0">Select one</option>
    </select2>
  </div>
</script>

<script type="text/x-template" id="select2-template">
  <select>
    <slot></slot>
  </select>
</script>

Solution

I stumbled across this exact problem today and I just wanted to post the answer, in case somebody else is wondering the same.

When emitting from the select2, you have to use the proper way of picking out the results from the select2.

Replace

vm.$emit('input', this.value)

with

vm.$emit('input',  $(this).val())

This makes sure that we use the jquThis will fill the v-model (in your example: selected) with an array containing all the selected ids.