title: Chart data of object gets overwritten, but only the first object that is interacted with is affected
body: <p>Here is this a code sand box proving and showcasing this issue: <a href="https://codesandbox.io/embed/ql4rm9734w?fontsize=14" rel="nofollow noreferrer">https://codesandbox.io/embed/ql4rm9734w?fontsize=14</a></p>
  
  <p>When a user clicks on a button in the app's. A widget is meant to show the data of that object. The the object contains an array that is used to produce a graph. The first object's button click seems to display and function correctly. So does the second and the third. But when the first objects button is clicked again the chart data property of the object is overwritten with the chart data of the previously clicked object.</p>
  
  <p>The application has been built in Vue.Js, with Highcharts, and Highcharts official Vue wrapper rendering the charts. The data is stored in a Vuex store. </p>
  
  <p>The page gets populated with a button for each object. When a objects button is clicked a custom event is fired containing the object data. The object click event handler mutates the store passing the object to the store to be saved as a active marker object. The object Widget that displays the data to the user gets its data from the stores active marker object. </p>
  
  <p>this process works fine for every other object that uses this system. It also only ever effects the first object clicked, all subsequent objects are unaffected and work correctly. </p>
  
  <p>I have tried the following with no luck</p>
  
  <ul>
  <li>Vue dev tools and debugging, shows the symptoms of the error but does not point to where the error takes place.</li>
  <li>I have tried making the data property a pseudo private property that can only be accessed with setters and getters. The setter is never called.</li>
  <li>Added second property in the class to act as a not modified storage variable for the original data given at construction time. This second property also gets modified. </li>
  <li>When examining the store in depth, it looked like the object array in the store was not affected by the bug. However when refactored to use the object from the store directly the bug is still there. </li>
  <li>I tried to separate out the data into a separate state property that is not related to the object in any direct way... still the same bug.</li>
  <li>I also tried with a every small data array (15 elements) still the bug persisted.</li>
  <li>I have even built a mini replica project in the hopes that at the smallest scale the bug does not appear and hopefully it would be a silly typo or something... but again, even this mini version of my app still shows the bug. the Mini version can be found here: <a href="https://github.com/ChadRoberts21/ChartMapBug" rel="nofollow noreferrer">https://github.com/ChadRoberts21/ChartMapBug</a></li>
  <li>Built a more refined smaller example: <a href="https://codesandbox.io/embed/ql4rm9734w?fontsize=14" rel="nofollow noreferrer">https://codesandbox.io/embed/ql4rm9734w?fontsize=14</a></li>
  </ul>
  
  <p>The code is available from <a href="https://codesandbox.io/embed/ql4rm9734w?fontsize=14" rel="nofollow noreferrer">https://codesandbox.io/embed/ql4rm9734w?fontsize=14</a> </p>
  
  <p>I expect that the correct chart data is always shown in the object widget and for the object to not have its data property overridden at all unless I expressly choose to do so in a Vuex mutation.</p>