ApexCharts & Vue - changing prop values does not update chart in chart component

Question

I have an ApexCharts chart in a separate component, and the series values are passed in as a prop.

My parent component makes some calculations in beforeMount(), which determines the values in the array that is the prop.

I don't know why, but it's not updating dynamically. ApexCharts documentation says:

You don't actually need to call updateSeries() or updateOptions() manually

And I would expect Vue to update the values like this automatically.

I have checked by displaying the variable passed as a prop in the parent component, and the values are updating after the calculations are made. Do I need to do something extra to 'push' these through to the child component again, after this?

Answer 1

I've found a workaround, be it's still surprising to me that it doesn't update automatically.

From: https://michaelnthiessen.com/force-re-render/

If I assign a key to the component, like this:

<Chart :values='this.values' :key="componentKey" />

export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;
    }
  }
}

And then call the forceRerender() method after I've done my calculations for this.values, everything seems fine -- the chart displays with the correct values from the calculated prop.