title: Is mutating a property of a prop with v-model bad practice?
body: <p>The <a href="https://v2.vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow" rel="nofollow noreferrer">vue.js docs</a> are quite strict in saying that mutating props inside of the component is bad practice. Also there are two cases described, in which a developer may be tempted to break this rule:</p>
  <ul>
  <li>When setting a default value</li>
  <li>When the given prop values should be mutated.</li>
  </ul>
  <p>Since I started with vue.js I found myself tempted updating a props property using <code>v-model</code>. Seaching the web I found several discussions which included workarounds or use vuex.</p>
  <p>My question is: Is updating a property of a prop using <code>v-model</code> OK or is BAD because it alters parent state.
  Imo I want to alter the parent state, consider this example</p>
  <p>A Crud component, that loads a specific &quot;form&quot; component:</p>
  <pre><code>&lt;template&gt;
      &lt;awesome-form @formSubmit=&quot;onFormSubmit&quot; :entity=&quot;entity&quot;&gt;&lt;/awesome-form&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import AwesomeForm from 'SomeForm'
  export default {
    data () {
      return {
        entity: {}
      }
    },
    components: {
      AwesomeForm
    },
    methods: {
      onFormSubmit () {
        axios.post('/backend', this.entity)
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>The specific form component:</p>
  <pre><code>&lt;template&gt;
      &lt;form @submit.prevent=&quot;submit&quot;&gt;
          &lt;input type=&quot;text&quot; name=&quot;username&quot; v-model=&quot;entity.username&quot; /&gt;
          ...
      &lt;/form&gt;
  &lt;/template&gt;
  &lt;script&gt;
    export default {
      props: {
        entity: {
          type: Object
        }
      },
      methods: {
        submit () {
          this.$emit('formSubmit')
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  <p>This works like intended and makes data binding super easy. But I guess this is considered bad, as it updates parent state. But in the end of the day this is exactly what i want.</p>
  <p>Is this really bad and what are the alternatives?</p>
  <ul>
  <li>Having events for each update and single property (super redundant)</li>
  <li>Always use vuex ... (really?)</li>
  </ul>