title: Vue.js model binding to a jquery input
body: <p>How do you bind an input using vue.js when the input is rendered using a jquery plugin such as datepicker. In my example below the two way binding doesnt work for the jquery colourpicker. When I change the color it doesn't change the corresponding vue value:</p>
  
  <pre><code>&lt;html&gt;
  
    &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Color picker for jQuery&lt;/title&gt;
      &lt;meta name="description" content="A very simple jQuery color picker plugin"&gt;
      &lt;link rel="stylesheet" href="jquery.simplecolorpicker.css"&gt;
      &lt;link rel="stylesheet" href="jquery.simplecolorpicker-regularfont.css"&gt;
  
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div id="cars"&gt;
        &lt;table&gt;
          &lt;tr v-for="car in cars"&gt;
            &lt;td&gt;
              &lt;input name="name" type="text" v-colorpicker="car.name"&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;select class="colorpicker" name="color" v-model="car.color"&gt;
                &lt;option value="#cc6699"&gt;#cc6699&lt;/option&gt;
                &lt;option value="#993366"&gt;#993366&lt;/option&gt;
                &lt;option value="#cc3333"&gt;#cc3333&lt;/option&gt;
                 &lt;option value="#336699"&gt;#336699&lt;/option&gt;
              &lt;/select&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
  
        &lt;pre&gt;{{$data | json }}&lt;/pre&gt;
  
      &lt;/div&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="jquery.simplecolorpicker.js"&gt;&lt;/script&gt;
      &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.13/vue.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        new Vue({
          el: '#cars',
  
          data: {
            cars: [{
              name: 'Toyota',
              color: '#cc6699'
            }, {
              name: 'Nissan',
              color: '#336699'
            }]
          }
  
        });
  
        $('select.colorpicker').simplecolorpicker({
          picker: true,
          theme: "regularfont"
        });
      &lt;/script&gt;
    &lt;/body&gt;
  
    &lt;/html&gt;
  </code></pre>
  
  <p>*** UPDATE ****</p>
  
  <p>I've manage to get something working using the following directive, the only problem is when the page first loads, each picker isn't selected with the  correct color as per the cars array - they all load with the first option as selected - do i need to add an onload method to the directive below:</p>
  
  <pre><code>  Vue.directive('colorpicker', {
        twoWay: true,
        priority: 1000,
  
        params: ['options'],
  
        bind: function () {
          var self = this
  
          $(this.el)
            .simplecolorpicker({
              picker: true, 
              theme: "regularfont"
            })
            .on('change', function () {
              self.set(this.value)
            })
        },
        update: function (value) {
          $(this.el).val(value).trigger('change')
        },
        unbind: function () {
          $(this.el).off().simplecolorpicker('destroy')
        }
      })
  </code></pre>