VueJS - VueChart JS not getting updated on store.dispatch - vue.js

Question

I have something like accepting parameters from a form and submitting. On submit, I dispatch an action and return the response and assign them to the parameters of the chart. But the change is not happening unless i press the submit button twice. But when i press the submit button, the label is getting updates as there is a v-model linked to the label select. But since there is no v-model for the bar-chart component, it is not getting updated.
<template>
<v-container fluid>
<v-card class="small" v-if="!empty">
<bar-chart :chart-data="datacollection"></bar-chart>
</v-card>
</v-container>
</template>
<script>
import BarChart from './BarChart.js'
import { mapGetters, mapActions } from "vuex";
export default {
name : "TestLegPerformance",
components: {
BarChart
},
data: () => ({
startdate: null,
enddate: null,
startmodal: false,
endmodal: false,
datacollection : {
labels: [],
datasets: [
{
label: '',
backgroundColor: '#C58917',
data: []
}
]
},
selected: [],
empty: true
}),
computed: {
...mapGetters({
planNames: "planNames",
details: "details" //parameter that i return from getters
})
},
mounted () {
this.getAllPlanNamesAction();
},
methods: {
...mapActions(["getAllPlanNamesAction","getDetails"]),
//assigning values to the chart parameters
changeData(){
this.empty = false;
let collectionClone = Object.assign({}, this.datacollection);
collectionClone.datasets[0].label = this.selected;
collectionClone.labels = this.details.months;
collectionClone.datasets[0].data = this.details.sub_count;
this.datacollection = collectionClone;
console.log('Collection Clone: ',collectionClone)
},
// form submit action
submitAction(){
this.empty = true;
console.log("Plan: ",this.selected);
console.log("Start Date: ",this.startdate);
console.log("End Date: ",this.enddate);
this.$store.dispatch('getDetails',
[this.selected,this.startdate,this.enddate])
this.changeData();
}
}
}
</script>

Answer 1

Chart.js and Vue Chart.js are not reactive by default.
See this in the Vue Chart.js docs
See this example

Answer 2

So after a lot of tries, I got it to work by redirecting the submit button to two different functions and adding a timeout between those two functions.