title: Cant update vuejs2 v-model from native javascript change event
body: <p>I'm trying to figure out how to fire native javascript events on an input given that I want to update a data attribute inside my vue instance.</p>
  
  <p>I'm searched a bit on the matter (and that's how I got to the part that suggests the solution is a native javascript event) due to this post <a href="https://github.com/vuejs/vue/issues/96#issuecomment-37870300" rel="nofollow noreferrer">https://github.com/vuejs/vue/issues/96#issuecomment-37870300</a></p>
  
  <p>So I have this input:</p>
  
  <pre><code>&lt;input type="text" name="occurred" id="occurred" class="form-control" required="" v-model="occurred"&gt;
  </code></pre>
  
  <p>And through javascript I'm attempting to figure it's native event so that vue can update v-model="occurred" (I'm using <strong>pickadate.js</strong>)</p>
  
  <pre><code>$('#occurred').pickadate({
    format: 'dddd, dd mmm, yyyy',
    formatSubmit: 'dd-mm-yyyy',
    hiddenPrefix: 'prefix__',
    hiddenSuffix: '__suffix'  
  });
  
  var evt = document.createEvent('HTMLEvents');
  evt.initEvent('change', true, true);
  
  var el = document.getElementById("occurred");
  el.dispatchEvent(evt);
  </code></pre>
  
  <p>I've tried a couple different ways but I can't seem to fully understand how it works. </p>
  
  <p>I would be super glad if you could explain to me the solution rather than just give it as I want to comprehend it.  </p>
  
  <p>I've created a fiddle to help explain: <a href="https://jsfiddle.net/c1askwj2/5/" rel="nofollow noreferrer">https://jsfiddle.net/c1askwj2/5/</a></p>
  
  <p>edit:
  A solution is to do what I don't want to do. Basically "expose" your view object:</p>
  
  <pre><code>var vueFoo = new Vue({ ... });
  </code></pre>
  
  <p>This way you can access it through varFoo.thedate and set it:</p>
  
  <pre><code>$('#thedate').pickadate({
    onSet: function(value) {
      var date = new Date(value.select);
      vueFoo.thedate = date.getDate() + '-' + date.getMonth() + 1 + '-' + date.getFullYear();
    }
  });
  </code></pre>
  
  <p>This to me is a very ugly solution as I like to keep my vue objects unavailable...</p>