title: How to unbind an array copy in Vue.js
body: <p>I am trying to copy one array to another and use this like the new array without any changes to old one:</p>
  
  <pre><code>&lt;div id="app"&gt;
      &lt;div class="form-group"&gt;
         &lt;label&gt;Test input&lt;/label&gt;
         &lt;input v-model="testArray[0].name" type="text" class="form-control" placeholder="Input"&gt;
      &lt;/div&gt;
      &lt;br&gt;
      &lt;pre&gt;testArray: {{ testArray[0] | json}}&lt;/pre&gt;
      &lt;pre&gt;templateArray: {{ templateArray[0] | json  }}&lt;/pre&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>new Vue({
    el: '#app',
    data: {
        testArray: [],
        templateArray: [{name: "TEST"},], 
    },
    ready: function() {
        this.testArray = this.templateArray.slice(0);
      },
  });
  </code></pre>
  
  <p>the issue is that then I am updating new array 'testArray' I also change old array 'templateArray'.</p>
  
  <p>The script in action: <a href="https://jsfiddle.net/4po1cpkp/7/" rel="noreferrer">https://jsfiddle.net/4po1cpkp/7/</a></p>
  
  <p>Is there any way to create new array based on array template without directly binding it to template?</p>