title: Vue.js component prop without 2 way binding?
body: <p>I found <a href="https://stackoverflow.com/questions/44790842/vuejs-right-way-to-edit-prop-without-changing-parent-data">this question that is similar</a>, but it did not explain the issue I am trying to solve for. (Using Vue.js 2)</p>
  <p>I have an array of objects (users), that I display as a list.
  I want to open an &quot;edit user&quot; modal component, which needs to prefill the form values with the user data (exact parent object), but I do not want to edit the parent data until I click a save button that verifies the data before emitting an input event with the new values of the object.</p>
  <p>I do not want to manually call out each property to create a new &quot;clean&quot; object (if I change the data type this is a headache), but Vue is adding its reactivity to the user object and therefore modifying the value in the component updates the parent value at the same time.</p>
  <p>I also want to wait for the server to confirm a change is saved before emitting the input event; therefore the parent won't update until the data is confirmed on the server.</p>
  <p>Is there a recommended pattern for non-reactively modifying props in components, instead using the emitted <code>input</code> event to update, as per the <a href="https://v2.vuejs.org/v2/guide/components.html#Composing-Components" rel="nofollow noreferrer">Vue component prop/event specs</a>?</p>
  <p>Note: I already have a working example, save for the concern with separating the reactivity bit.</p>