title: Vue2: warning: Avoid mutating a prop directly
body: <p>I'm stuck in the situation where my child component (autocomplete) needs to update a value of its parent (Curve), And the parent needs to update the one of the child (or to completely re-render when a new Curve component is used)</p>
  
  <p>In my app the user can select a Curve in a list of Curve components. My previous code worked correctly except the component autocomplete was not updated when the user selected another Curve in the list (the component didn't update its values with the value of the parent).</p>
  
  <p>This problem is fixed now but I get this warning:</p>
  
  <blockquote>
    <p>Avoid mutating a prop directly since the value will be overwritten
    whenever the parent component re-renders. Instead, use a data or
    computed property based on the prop's value. Prop being mutated:
    "value"</p>
  </blockquote>
  
  <p>The description of this warning explain exactly what behavior I expect from my components. Despite this warning, this code works perfectly fine ! </p>
  
  <p>Here is the code (parts of it have been removed to simplify)</p>
  
  <pre><code>// curve.vue
  &lt;template&gt;
    &lt;autocomplete v-model="curve.y"&gt;&lt;/autocomplete&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
    import Autocomplete from './autocomplete'
  
    export default {
      name: 'Curve',
      props: {
        value: Object
      },
      computed: {
        curve() { return this.value }
      },
      components: { Autocomplete }
    }
  &lt;/script&gt;
  
  
  // autocomplete.vue
  &lt;template&gt;
      &lt;input type="text" v-model="content"/&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      name: 'Autocomplete',
      props: {
        value: {
          type: String,
          required: true
        }
      },
      computed: {
        content: {
          get() { return this.value },
          set(newValue) { this.value = newValue }
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>A lot of people are getting the same warning, I tried some solutions I found but I was not able to make them work in my situation (Using events, changing the type of the props of Autocomplete to be an Object, using an other computed value, ...)</p>
  
  <p>Is there a simple solution to solve this problem ? Should I simply ignore this warning ?</p>