title: Vue changes array in data after making a copy of it
body: <p>So I have this code in vue:</p>
  
  <pre><code>export default {
   name: 'Test',
    data() {
      return {
        test1: ['1', '2', '3'],
        test2: [{
          name: 'Hello'
        }, {
          name: 'Number two'
        }, {
          name: 'What ever'
        }], 
       };
    },
   created() {    
      const first = [...this.test1];
      first.forEach((elm, index) =&gt;  first[index] = 'New');
      console.log('first: ', first);
      console.log('test1 in data', this.test1);
  
      const second = [...this.test2];
      second.forEach(elm =&gt; elm.name = 'New');
      console.log('second: ', second);
      console.log('test2 in data', this.test2);
    },
  }
  </code></pre>
  
  <p>After setting the value of each item of the array 'first' (that should be a copy without reference to the data 'test1' array) each item is equal to 'new'. The value of this.test1 doesn't change. </p>
  
  <p>I did the same with test2. Copied and changed the value of each item to 'New'. But now the value of the data array 'test2' also has 'New' in every item.</p>
  
  <p>I have no clue why this is like that. Any ideas?</p>