JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/7.1.1/highcharts.js"></script>
<div id="app">
  <div id="container"></div>
</div>

JavaScript

new Vue({
  el: "#app",
  data: {
    chart: undefined,
    config: {
      chart: {
        type: 'column'
      },
      title: {
        text: 'Stacked column chart'
      },
      xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
      },
      yAxis: {
        min: 0,
        title: {
          text: 'Total fruit consumption'
        },
        stackLabels: {
          enabled: true,
          style: {
            fontWeight: 'bold',
            color: ( // theme
              Highcharts.defaultOptions.title.style &&
              Highcharts.defaultOptions.title.style.color
            ) || 'gray'
          }
        }
      },
      legend: {
        align: 'right',
        x: -30,
        verticalAlign: 'top',
        y: 25,
        floating: true,
        backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || 'white',
        borderColor: '#CCC',
        borderWidth: 1,
        shadow: false
      },
      tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
      },
      plotOptions: {
        column: {
          stacking: 'normal',
          dataLabels: {
            enabled: true
          }
        }
      },
      series: [{
        name: 'John',
        data: [3, 3, 4, 8, 2]
      }, {
        name: 'Jane',
        data: [3, 2, 3, 2, 1]
      }, {
        name: 'Joe',
        data: [3, 4, 4, 3, 5]
      }]
    },
  },
  mounted() {
    this.render();
    // simulation of some data changing after some time
    setTimeout(() => {
      this.config.series = [{
        name: 'John',
        data: [53, 23, 24, 27, 32]
      }, {
        name: 'Jane',
        data: [23, 22, 23, 32, 31]
      }, {
        name: 'Joe',
        data: [33, 24, 24, 32, 35]
      }]
      console.log('updated')


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