Using Vue Google Chart - Geochart. Chart reloads on data change, but legend gets dropped

Question

I am using vue google charts in my nuxt project. When I change date selections, the data is mutated, and the computed method in my geochart component reads the correct new data.... But the legend at the bottom (color bar) does not work like it should... Instead it reads NaN NaN...As a result, the chart shows the correct data, but not the correct color coding. Screenshot attached for clarity. (Mouseover on the countries shows the correct data, but since the color mapping is not kicking in, the two countries show the same color shade, despite the values being significantly different)

This is how I am loading the chart:

<GChart
  :settings="{ packages: ['geochart'], mapsApiKey: '<usingmapsapikeyhere>' }"
  type="GeoChart"
  :data="countriesForMap"
  :options="chartOptions"
  ref="gChart"
/>

countriesForMap ----

computed: {
    ...mapState(["countriesForMap"]),
  }

Answer 1

I figured it out. Instead of updating the array, my mutation was appending new data to the same array, which was making the array unusable. I am not sure why it was still reflecting the correct data on the map, but now that I have changed the mutation code, it is working fine now.

For example, The initial array looked like

[
["Country", "Data"],
["India", 42],
["Japan", 12]
]

Because of the wrongly set up mutation function, my new data array was looking like this:

[
["Country", "Data"],
["India", 42],
["Japan", 12],
["Country", "Data"],
["India", 23],
["Japan", 7]
]

Fixing that solved the problem.