VueJS - VueChart JS not getting updated on store.dispatch

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