title: Vue 3 how to correctly update data in Highcharts?
body: <h2>Trouble updating data in Highcharts with Vue.js 3</h2>
  <p>I have a small webapp with <strong>Vue.js 3</strong> that shows a <strong>Highcharts</strong> Chart and some statistics, with global buttons for time-filters (All, Year, Month, Week).<br />
  The data of my Highchart chart needs to change, whenever one of the global buttons was pressed.<br />
  I used this vue3 wrapper for Highcharts: <a href="https://github.com/smithalan92/vue3-highcharts" rel="nofollow noreferrer">Wrappers Github</a></p>
  <p>Displaying the initial data (all) works like a charm, but when it comes to updating the data, it is really slow. That makes me think that I am doing something wrong with updating the data.</p>
  <p>I uploaded a video of my problem on YT: <a href="https://youtu.be/GEjHqoAElgI" rel="nofollow noreferrer">https://youtu.be/GEjHqoAElgI</a></p>
  <p>Additionally I created a <strong>minimal reproducible example</strong> on codesandbox: <a href="https://codesandbox.io/s/blissful-goldwasser-zq8je?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">https://codesandbox.io/s/blissful-goldwasser-zq8je?fontsize=14&amp;hidenavigation=1&amp;theme=dark</a><br />
  <em>It consists of a Chart.vue component, which gets its property &quot;data&quot; updated, when the button &quot;Update Data&quot; is pressed. The button can be toggled multiple times, and it will always take several seconds until the chart is updated.</em></p>
  <p>Tried giving my component with the Chart the data as property, and have a watcher on that data, to update the Chart whenever the data changes.
  This works, but updating the chart takes forever (3-5 seconds).
  What is the recommended way of doing something like that?</p>
  <p>This is my component:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;VueHighcharts
      class=&quot;hc&quot;
      :options=&quot;options&quot;
      :deepCopyOnUpdate=&quot;true&quot;
      :redrawOnUpdate=&quot;true&quot;
      :oneToOneUpdate=&quot;false&quot;
      :animateOnUpdate=&quot;false&quot;
    /&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import VueHighcharts from &quot;vue3-highcharts&quot;;
  
  export default {
    name: &quot;CoinChart&quot;,
    components: {
      VueHighcharts,
    },
    props: {
      stats: [Object],
    },
    data() {
      return {
        options: {
          title: {
            text: &quot;Coins&quot;,
          },
          series: [
            {
              name: &quot;ETH&quot;,
              data: [],
            },
            {
              name: &quot;BTC&quot;,
              data: [],
            },
          ],
        },
      };
    },
    watch: {
      stats: {
        immidiate: true, // as pointed out in the commments, this line does not do anything
        handler: function (val) {
          // create data for chart
          const eth = new Array();
          const btc = new Array();
          this.options.series[0].data = [];
          this.options.series[1].data = [];
  
          for (let i in val) {
            eth.push([val[i].time * 1000, val[i].coinsPerHour]);
            btc.push([val[i].time * 1000, val[i].btcPerHour]);
          }
  
          // set to chart
          this.options.series[0].data = eth;
          this.options.series[1].data = btc;
        },
      },
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>This is driving me crazy, spent 4hours today on trying to fix it, with no success. Even thought about switching to Chart.js, but apparently there is no real support for Vue.js 3 either.</p>