title: Vue component updating whilst typing clearing text in input
body: <p>i think this is a reactivity issue when the component is updated. Basically if I type quickly within my input and the parent data is updated the text can sometimes be lost.</p>
  <p>Better for you to try it below, simply type quick and you will see letters disappearing.</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>const search = Vue.component('search', {
    props: [ "suggestions", "settings", "search" ],
    template: `
    &lt;div&gt;
      &lt;input type="text" placeholder="Search..." :value="search" @keyup="$emit('update:search', $event.target.value)"&gt;
      &lt;p v-for="suggestion in suggestions"&gt;{{ suggestion }}&lt;/p&gt;
    &lt;/div&gt;
    `
  })
  
  new Vue({
    data: {
      settings: {},
      state: {
        autocompletedSuggestions: []
      },
      search: ""
    },
    watch: {
      search(value) {
        const dummyData = [ 'test1', 'test2', 'test3', 'test4', 'test5', 'test6', 'test7', 'test8' ]
        window.setTimeout(() =&gt; {
          let random = Math.round(Math.random() * (dummyData.length - 0) + 0);
          let suggestions = [];
          for (let i = 0; i &lt; random; i++) {
            suggestions.push(dummyData[Math.round(Math.random() * (dummyData.length - 1) + 0)])
          }
          this.state.autocompletedSuggestions = suggestions
        }, 100)
      }
    }
  }).$mount('#app')</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>p {
    padding: 0;
    margin: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt;
    &lt;search :suggestions="state.autocompletedSuggestions"
            :settings="settings"
            :search.sync="search"&gt;&lt;/search&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>How can I stop this from happening?</p>