title: Cancel property update in vue component
body: <p>I have a Vue component to update user data</p>
  
  <pre><code>&lt;template&gt;
    &lt;form&gt;
  
       ... fields to update user property ...
  
      &lt;button class="btn btn-primary" :disabled="!isDirty" @click.prevent="submit"&gt;Submit&lt;/button&gt;
      &lt;button class="btn btn-default" @click.prevent="cancel"&gt;Cancel&lt;/button&gt;
    &lt;/form&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    props: ["user"],
    methods: {
      submit() {
        this.$emit("formIsSubmitted", true);
      },
      cancel() {
  
        ????
  
      }
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>When I submit, the user in the parent component is updated, since it is an object passed by reference.
  How can I 'reset' the user property to its original values when the cancel button is clicked?</p>
  
  <p>I tried by creating a clone object in the created() event and then reset user to that object, but then I get the following error:</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: "user" </p>
  </blockquote>