title: Vue.js | Manually triggered events breaking model synchronization?
body: <p>I am having some issues with one of my modules. </p>
  
  <p>Consider the following example: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Vue.config.async = false; // if I remove this, it stays at initial value
  
  var vm = new Vue({
    el: '#test',
    data: {
     value: 'initial value'
    },
    methods: {
      changeHandler: function () {
        console.log('changed!')
      }
    }
  });
  
  vm.value = 'value change 1';
  vm.$el.dispatchEvent(new Event('change'));
  vm.value = 'value change 2';
  vm.$el.dispatchEvent(new Event('change'));
  
  console.log(vm.value); // 'value change 1'</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;textarea id='test' v-model='value' v-on:change="changeHandler"&gt;&lt;/textarea&gt;
  
  &lt;script src="https://vuejs.org/js/vue.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Why won't model (and view) update after dispatching a 'change' event right before I want to assign a new value?</p>
  
  <p>Is this a problem with Vue or am I just doing something incorrectly?</p>