title: JSON Object copy in Vuex getter
body: <p>I'm finding some strange behavior with JSON in a Vuex getter: it seems it is contributing to a pass-by-reference type of problem. For context - I'm developing a music app, which will have multiple "scenes", which each include collections of "tracks" (similiar to Ableton Live).  </p>
  
  <p>Here's my getter:</p>
  
  <pre><code>  newTrack: state =&gt; {
      let newTrack = JSON.parse(JSON.stringify(state.newTrackDefaults))
      return newTrack
    },
  </code></pre>
  
  <p>Here's the object it refers to:</p>
  
  <pre><code>  newTrackDefaults: {
      tune: [],
      // and other properties
    },
  </code></pre>
  
  <p>And then it is called by an action:</p>
  
  <pre><code>  setUpNewScene: context =&gt; {
      let newScene = JSON.parse(JSON.stringify(context.state.newSceneDefaults))
      let newTrack = context.getters.newTrack  
      console.log(newTrack) // this reveals that the problem is from the getter 
      newScene.tracks.push(newTrack)
      context.commit('addNewScene', newScene)
   }
  </code></pre>
  
  <p>So the problem with this code is, when I add items (pitch-references) to a track on the first scene, then added a new scene, the <em>new</em> scene automatically receives the same track as the <em>first</em> scene. This is reflected in the Vuex state (according to the DevTool), not just the rendering. Also, when the tracks on the first scene are updated by the user, the tracks on the new scene change accordingly. So instinctively, this feels like a pass-by-reference type of error.</p>
  
  <p>Through various <code>console.log</code> experiments, I found that the getter was returning the "filled" track. It's fixable by skipping the getter and writing the action as: </p>
  
  <pre><code>  setUpNewScene: context =&gt; {
      let newScene = JSON.parse(JSON.stringify(context.state.newSceneDefaults))
      let newTrack =  JSON.parse(JSON.stringify(context.state.newTrackDefaults))
      console.log(newTrack) // this works fine
      newScene.tracks.push(newTrack)
      context.commit('addNewScene', newScene)
   }
  </code></pre>
  
  <p>... so though I have a fix, I'm puzzled as to the original behavior. Would the getter interfere with the <code>JSON</code> functions? Or what else might be going on to cause this? </p>