title: Vue.js: use setTimeout function changing input value?
body: <p>I'm the very beginning of <code>Vue.js</code>, I just meeting <code>v-model</code> part, here is the code:   </p>
  
  <p>HTML:<br>
  <code>&lt;div id="app"&gt;
    &lt;p&gt; {{message}} &lt;/p&gt;
    &lt;input v-model="message" id="input_id"&gt;
  &lt;/div&gt;</code> </p>
  
  <p>javascript:  </p>
  
  <pre><code>var v = new Vue({
    el:"#app",
    data:{
      message: "Hello"
    }
  });
  
  var inputDOM = document.querySelector('#input_id');
  
  setTimeout(function(){
    inputDOM.value = "Changing By timeout";
  },1500);
  </code></pre>
  
  <p>Yes, when I type some text in <code>input</code> tag, the <code>innerHTML</code> of <code>&lt;p&gt;</code> will change as long as I type. 
  BUT<br>
  If I use <code>setTimeout</code> function to change the value of <code>input</code> tag, the <code>innerHTMl</code> of <code>&lt;p&gt;</code> won't change.<br>
  and yes, if use <code>setTimeout</code> function to change the value of <code>data</code> object, the <code>input</code> value will as long as change.   </p>
  
  <p>here is the <code>vue.js</code> I include:<br>
  <code>&lt;script src="https://unpkg.com/vue/dist/vue.js"&gt;&lt;/script&gt;</code><br>
  and here is the demo on <a href="http://codepen.io/FlyC/pen/eBLzxE?editors=1010" rel="nofollow noreferrer">codepen.io</a></p>
  
  <p>Without any purpose indeed, so I don't need any other solution to handle that two-way binding, just a little bit curious why.</p>