Vuejs Data Update - highcharts

Question

I am trying to update highcharts data from a vuex-store, but the issue is that when the click event is triggered, the data in the vuex store state is mutated, but it only reflects in my highcharts component when i make some changes to the code and save the changes.
I am working on a dashboard using Vue and Highcharts.
<template>
<div>
<vue-highcharts :options="options" ref="lineCharts"></vue-highcharts>
<v-btn>{{parts}}</v-btn>
</div>
</template>
<script>
import VueHighcharts from 'vue2-highcharts';
import Vue from 'vue';
export default {
components: {
VueHighcharts,
},
data() {
return {
options: {
chart: {
type: 'spline',
title: 'Hassaan',
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
},
yAxis: {
title: {
text: '',
},
labels: {
formatter() {
return `${this.value}°`;
},
},
},
tooltip: {
crosshairs: true,
shared: true,
},
credits: {
enabled: false,
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1,
},
},
},
series: [],
},
};
},
created() {
Vue.set(this.options, 'series', this.$store.state.parts);
},
};
</script>
I want the data to be updated without making any changes to the code and saving it.

Answer 1

You should use a computed to get the value with reactivity from the store, that way you don't need the created hook anymore. Also you should never access values from your store directly through the state, instead create a getter.
I'm not sure what are you trying to do, however this should be the right structure. If you only want to set this.options.series = this.$store.getters.parts. Like you are already doing with the Vue.set(this.options, 'series', this.$store.state.parts), in that case, add a watcher for the computed property and set the new property value.
{
watch: {
parts (updatedParts) {
this.series.parts = updatedParts;
}
},
computed: {
parts () {
return this.$store.getters.parts;
}
}
}