Highcharts Chart Didn't Redraw After Vue Data Changed

I grab the example from: https://www.highcharts.com/demo/column-stacked Also referring some of the code from: How to use Vue bound data in Highcharts? I build a sample as bellow: &

Solution 1:

The problem is your config watcher only watch the change of config not its nested properties so this.config.series = [...] won't trigger your watcher.

First solution, use deep option:

watch: {
  config: {
    handler() {
      this.render()
    },
    deep: true
  }
}

Demo

Second solution, use spread syntax to assign the whole object:

this.config = {
  ...this.config,
  series: [{ /* */ }]
}

Demo

Solution 2:

Here is the solution for you:

1. Destruct the config object in render method to lose a reference:

   render() {              
       this.chart = Highcharts.chart('container', {...this.config});
   }
   

2. Change your config watcher to deep (that way watcher will react when you are changing property that belongs to the object e.g. this.config.series = [...]):

   config: {
       deep: true,
       handler() {
           this.render();
       }
   }