title: Vue resets child Component data on props update
body: <p>I have child component, that has some internal data, that should not be changed from outside. But when I update prop from parent component, this internal data is reset.</p>
  <p>Basically in example below, when we change <code>title</code> from outside, <code>value</code> is set back to empty ''. How can I make <code>value</code> persistent with Child component props update?</p>
  <blockquote>
  <p>Child.vue</p>
  </blockquote>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;child&quot;&gt;
      &lt;h2&gt;{{title}}&lt;/h2&gt;
      &lt;input type=&quot;text&quot; :value=&quot;value&quot; v-on:change=&quot;$emit('change', $event.target.value)&quot;&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      props: {
        title: {
          default: 'Just title'
        }
      },
      data() {
        return {
          value: ''
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  <blockquote>
  <p>Parent.vue</p>
  </blockquote>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;parent&quot;&gt;
      &lt;Child :title=&quot;title&quot; v-on:change=&quot;processTitle($event)&quot;&gt;&lt;/Child&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    import Child from './Child';
  
    export default {
      data() {
        return {
          title: 'Title from parent'
        }
      },
      methods: {
        processTitle(value) {
          this.title = value.reverse();
        }
      }
    }
  &lt;/script&gt;
  </code></pre>