title: Keeping two arrays of objects separate in VueJS?
body: <p>I have two arrays of objects:</p>
  
  <pre><code>  data: {
      a: [{"name":null}],
      b: [{"name":null}]
    },
  </code></pre>
  
  <p>And I have two methods. The first method adds an object to 'a'. And the second method, copies the entire 'a' to 'b.</p>
  
  <pre><code>  methods: {
      addNametoA() {
        this.a.push({"name":null})
      },
       CopyAtoB() {
        this.b = this.a
      }
    }
  </code></pre>
  
  <p>The problem is that once CopyAtoB() method is triggered, then whenever I add an object to a, it automatically copies it to b as well. This should not happen and how can I avoid it from happening?</p>
  
  <p>Here is a jsbin showing this behavior. </p>
  
  <p><a href="https://jsbin.com/dojicasuqo/1/edit?html,js,console,output" rel="nofollow noreferrer">https://jsbin.com/dojicasuqo/1/edit?html,js,console,output</a></p>