Select 2 Directive for Vuejs

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>

<div id="app">
  <h1>Simple</h1>
  <p></p>
  <p>Value: {{ simpleValue }}</p>
  <button @click="expand = !expand">
  Expand
  </button><br>
  <div v-if="expand">
    <select v-model='simpleValue' v-select>
      <option value="1" selected>One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  {{ simpleValue }}
  <hr>
  
  <h1>Multi Select</h1>
  <p>Value: {{ multiValue }}</p>
  <select v-model='multiValue' v-select="multiSettings" multiple></select>
  <hr>
  
  <h1>Custom Template</h1>
  <p>Value: {{ customTemplateValue }}</p>
  <select v-model='customTemplateValue' v-select="customTemplateSettings"></select>
  <hr>

</div>

CSS

select {
  width: 100%
}

JavaScript

function updateFunction (el, binding) {
  // get options from binding value. 
  // v-select="THIS-IS-THE-BINDING-VALUE"
  let options = binding.value || {};

  // set up select2
  $(el).select2(options).on("select2:select", (e) => {
    // v-model looks for
    //  - an event named "change"
    //  - a value with property path "$event.target.value"
    el.dispatchEvent(new Event('change', { target: e.target }));
  });
}
Vue.directive('select', {
  inserted: updateFunction ,
  componentUpdated: updateFunction,
});

function formatFunction (state) {
  var $state = $(
    '<span style="color: red">' + state.text + '</span>'
  );
  return $state;
}
var app = new Vue({
  el: '#app',
  data: {
 		expand: false,
    simpleValue: null,

    multiValue: [],
    multiSettings: {
      maximumSelectionLength: 3,
      data: [
        { id: 0, text: 'enhancement' }, 
        { id: 1, text: 'bug' }, 
        { id: 2, text: 'duplicate' }, 
        { id: 3, text: 'invalid' }, 
        { id: 4, text: 'wontfix' }
      ]
    },

    customTemplateValue: 0,
    customTemplateSettings: {
      templateResult: formatFunction,
      templateSelection: formatFunction,
      data: [
        { id: 0, text: 'We ' }, 
        { id: 1, text: 'Are' }, 
        { id: 2, text: 'Red' },
      ]
    }
  },
})