I am struggling to understand why certain methods of changing data seem to work while others do not. In an attempt to clarify, I experimented with the following example:
watch: {
'$store.state.linedata': function() {this.redraw()}
},
methods: {
redraw() {
this.chartOptions.series[0].data = this.$store.state.linedata
}
},
data() {
return {
chartOptions: {
chart: {
type: this.type
},
series: [{
data: this.$store.state.linedata,
name: "Test Series",
color: this.color
}]
}
}
}
This setup appears to be effective as when I update the linedata in my store, the component updates accordingly. However, I find it more natural to update the data directly like this, without referencing this.chartOptions.series[0].data:
redraw() {
this.$store.state.linedata = [1,2,3,4,5,6]
}
Although this code successfully updates the state, it does not result in the component being updated with the new data. Why does the second method fail and is the first approach the correct way to handle this? It feels like there may be a fundamental concept that I am overlooking. What would be considered best practice in this scenario?
Thank you!