select2 plugin with in vue

select2.vue

<style scoped>
.select2-container--default .select2-selection--multiple,.select2-selection--single {
    border-radius: 0;
}
</style>

<template>
  <select style="width: 100%" :name="name" multiple="multiple">
    <slot></slot>
  </select>
</template>

<script>
  export default {
    props: ['options', 'value', 'name', 'placeholder'],
    mounted: function () {

      var vm = this

      var data = [];
      this.options.forEach(function(option) {
        data.push({
          id: option.id,
          text: option.display_name
        });
      });

      $(this.$el)
        // init select2
        .select2({ data: data, placeholder: this.placeholder || 'click to select' })
        // emit event on change.
        .on('change', function () {
          vm.$emit('input', this.value)
        });

      if (this.value) {
        $(this.$el).val(this.value).trigger('change');
      }
    },
    watch: {
      value: function (value) {
        // update value
        $(this.$el).val(value)
      },
      options: function (options) {
        // update options
        $(this.$el).select2({ data: options })
      }
    },
    destroyed: function () {
      $(this.$el).off().select2('destroy')
    }
  }
</script>



// Vue.component('select2', require('./components/select.vue')); 
// than you can do use it like this
// <select2 name="role_ids[]" :options="json_options" :value="json_value" placeholder="placeholder you want"></select2>