Chart JS not reacting to change in computed property

Question

I have computed property:

computed: {
    drilldownData() {
        if (this.toggle_drill === "up") {
            return this.waterfallDataSmall
        } else {
            return this.waterfallData
        }
    }
}

And the toggle_drill is model variable connected to button-toggle component:

<v-btn-toggle v-model="toggle_drill">

When I toggle it the toggle_drill will change value from up to down and back without a problem.

However you can see in the reproduced example here: Codesandbox

That the chart only updates once and thats it. It should be updating as the toggle_drill is updating which this computed property indicates. It seems to be crashing after initial update but i have no idea why.

Answer 1

chart.js changes the chart data object and the original waterfallDataSmall gets overwritten after first change.

A simple fix is passing a cloned object.

drilldownData() {
  if (this.toggle_drill === "up") {
    return JSON.parse(JSON.stringify(this.waterfallDataSmall));
  } else {
    return this.waterfallData;
  }
}