title: Use vue.js methods with select2 directive
body: <p>I've create a new directive to use the jQuery Plug-In <strong>Select2</strong> with vue.js as written down on the vue.js <a href="https://vuejs.org/examples/select2.html" rel="nofollow">example page</a>.</p>
  
  <p>But I don't want to just output the value of the selected option. To store the selections I try to bind my custom method <code>create</code> to the <code>@change</code> event.</p>
  
  <p>Inside the directive, the Select2 will trigger the change event for the select input field while it updates, but nevertheless it still doesn't call my custom method.</p>
  
  <p>Is there some hidden magic? I've tried to read the source code of vue.js but can't find something that puts me in the right direction.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Vue.directive('select', {
    twoWay: true,
    priority: 1000,
  
    params: ['options'],
  
    bind: function() {
      var self = this;
  
      $(this.el)
        .select2({
          data: this.params.options
        })
        .on('change', function() {
          self.set(this.value);
        });
    },
  
    update: function(value) {
      $(this.el).val(value).trigger('change');
    },
  
    unbind: function() {
      $(this.el).off().select2('destroy');
    }
  });
  
  var vm = new Vue({
    el: '#items',
    data: {
      items: [],
      new_item: '',
      options: [{
        id: 1,
        text: 'First'
      }, {
        id: 2,
        text: 'Second'
      }, {
        id: 3,
        text: 'Third'
      }, {
        id: 4,
        text: 'Fourth'
      }, {
        id: 5,
        text: 'Fifth'
      }]
    },
    methods: {
      create: function() {
        var self = this,
          label = '';
  
        this.options.map(function(item) {
          if (self.new_item == item.id)
            label = item.text;
        });
  
        var obj = {
          id: self.new_item,
          name: label
        };
  
        this.items.push(obj);
        this.new_item = '';
      }
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>select {
    min-width: 300px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/vue/1.0.24/vue.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /&gt;
  &lt;div id="items"&gt;
    &lt;ul&gt;
      &lt;li v-for="item in items"&gt;{{ item.id }} &amp;ndash; {{ item.name }}&lt;/li&gt;
    &lt;/ul&gt;
    &lt;select v-select="new_item" @change="create" :options="options"&gt;
      &lt;option value="0"&gt;--Select--&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>