title: How to clone props object and make it non-reactive
body: <p>I have some form data which I share with children components through props. Now I want to clone the prop object and make it non-reactive. In my case I want the user to be able to modify the props value without actually changing the cloned value. The cloned value should only be there to show the user what the form was when editing. Below code shows this: </p>
  
  <pre><code>    &lt;template&gt;
          &lt;div&gt;
              &lt;div v-if="computedFormData"&gt;
                  original prop title: {{orgData.title}}
  
                  new title:
                  &lt;input type="text" v-model="formData.title"/&gt; 
                  //changing data here will also change orgData.title
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/template&gt;
  
      &lt;script&gt;
          export default {
              props: ['formData'],
              data() {
                  return {
                      orgData: [],
                  }
              },
              computed: {
                  computedFormData: function () {
                      this.orgData = this.formData;
                      return this.orgData;
                  },
              },
              methods: {
              },
          }
      &lt;/script&gt;
  </code></pre>
  
  <p>I have tried with <code>Object.freeze(testData);</code> but it doesnt work, both testData and orgData are reactive. Note also that using <code>mounted</code> or <code>created</code> property does not render orgData so I'm forced to use the <code>computed</code> property. </p>