title: vue.js select2 multiple select
body: <p>For many days I've searched to find an answer to this error. I tried many alternatives but nothing worked. </p>
  
  <p>I need to select multiple values. When I select multiple values, my code hangs, but when I use a single select it works well with <code>self.$emit('input', this.value)</code>. What I need is to select multiple values.</p>
  
  <p><strong>Select2.vue</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;select multiple class="input-sm" :name="name"&gt;
          &lt;slot&gt;&lt;/slot&gt;
      &lt;/select&gt;
  &lt;/template&gt;
  &lt;style src="select2/dist/css/select2.min.css"&gt;&lt;/style&gt;
  &lt;style src="select2-bootstrap-theme/dist/select2-bootstrap.min.css"&gt;&lt;/style&gt;
  
  &lt;script&gt;
      import Select2 from 'select2';
  
      export default{
          twoWay: true,
          priority: 1000,
          props: ['options', 'value', 'name'],
          data(){
              return{
                  msg: 'hello'
              }
          },
          mounted(){
              var self = this;
              $(this.$el)
                  .select2({theme: "bootstrap", data: this.options})
                  .val(this.value)
                  .trigger('change')
                  .on('change', function () {
                      //self.$emit('input', this.value) //single select worked good
                      self.$emit('input',  $(this).val()) // multiple select
                  })
          },
          watch: {
              value: function (value) {
                  $(this.$el).val(value).trigger('change');
              },
              options: function (options) {
                  $(this.$el).select2({ data: options })
              }
          },
          destroyed: function () {
              $(this.$el).off().select2('destroy')
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>new.vue</strong></p>
  
  <pre><code>    &lt;p&gt;Selected: {{ model.users_id }}&lt;/p&gt;
                &lt;select2 :options="options" v-model="model.users_id" name="options[]" style="width: 1000px; height: 1em;" class="form-control"&gt;
             &lt;option value="0"&gt;default&lt;/option&gt;
              &lt;/select2&gt;
  
      export default {
              data(){
                  return {
                      model: {
                          'users_id': [],
                      },
                      options: [],
  
  components:{
              'select2': Select2
           },
  </code></pre>