title: Vue.js Input value gets deleted on first char only
body: <p>Based on the official example <a href="https://v2.vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events" rel="nofollow noreferrer">Custom Input Component example: </a></p>
  <p><strong>HTML:</strong>
  </p>
  <pre><code>&lt;div id=&quot;app&quot; &gt;
    &lt;div :class=&quot;{'has-value' : hasValue}&quot;&gt;
      &lt;input type=&quot;text&quot;
        ref=&quot;input&quot;
        v-bind:value=&quot;value&quot;
        @input=&quot;onInput&quot; &gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>JS:</strong></p>
  <pre><code>new Vue({
    el: '#app',
    data: function() {
      return {
        hasValue: false
        }
    },
    props: ['value'],
    methods:{
    onInput: function(){
      val= this.$refs.input.value
        if(val &amp;&amp; val.length &gt; 0){
          this.hasValue = true
        } else {
          this.hasValue = false
        }
      }
    }
  })
  </code></pre>
  <p><a href="https://jsfiddle.net/delcon/jwok2jsx/" rel="nofollow noreferrer">JS Fiddle</a> to play</p>
  <p><strong>Expected:</strong>
  Dynamically set <code>hasValue</code> data for input and bind a Css Class to this data</p>
  <p><strong>Unexpected:</strong>
  Only after initialization and typing the first Character, the typed character gets deleted from the input. Press JS-Fiddle-&gt;Run to see it again.</p>
  <p>After first character everything works as expected.</p>
  <p>If I remove <code>v-bind:value=&quot;value&quot;</code> or comment <code>\\this.hasValue = true</code> it works as expected. Binding value prop is recommended for custom Input component.</p>
  <p>Is this intended and why? Or is this a bug I should report?</p>