title: Update vue.js data automatically when binded input field's value is changed by JavaScript
body: <p>I'm new to vue.js. It seems <a href="http://vuejs.org/guide/index.html#Two-way_Binding" rel="nofollow" title="Two-way binding">Two-way binding</a> of vue.js only listens to input event from user, if you change value by JS, vue.js's value is not updated</p>
  
  <p>Here is an example for what I mean:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function setNewValue() {
      document.getElementById('my-field').value = 'New value';
  }
  
  new Vue({
    el: '#app',
    data: {
      message: 'Old value'
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/vue/latest/vue.js"&gt;&lt;/script&gt;
  
  &lt;div id="app"&gt;
    &lt;p&gt;{{ message }}&lt;/p&gt;
    &lt;input id="my-field" v-model="message"&gt;
  &lt;/div&gt;
      
  &lt;button onclick="setNewValue()"&gt;Set new value&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If you click "Set new value" button, the field's value is changed to "New value" but the text above it is still "Old value" instead of "New value". But if you change the text in the field directly, the text above is changed synchronously.</p>
  
  <p>Is there anyway we can do this synchronous when updating value with JavaScript?</p>