title: Vue ApexCharts updating data series dynamically
body: <p>How can I update the data from the series for an <a href="https://apexcharts.com/" rel="noreferrer">ApexCharts</a>
  I have created the following <em>Vue Component</em> using the <a href="https://apexcharts.com/" rel="noreferrer">ApexCharts</a>.
  This component gets updated from the parent where a bunch of these components are situated.
  The updated values are coming in through props.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div&gt;
      &lt;apexchart type=&quot;line&quot; width=&quot;1000px&quot; :options=&quot;options&quot; :series=&quot;series&quot;&gt;&lt;/apexchart&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Vue from 'vue';
  import VueApexCharts from 'vue-apexcharts';
  
  Vue.use(VueApexCharts);
  Vue.component('apexchart', VueApexCharts);
  
  export default {
    name: 'EnergyConsumption',
    props: {
      channel1: Number,
      channel2: Number,
    },
    data() {
      return {
        options: {
          chart: {
            id: 'vuechart-example',
          },
          xaxis: {
            categories: ['Channel 1', 'Channel 2'],
          },
        },
        series: [
          {
            name: 'series-1',
            data: [this.channel1, this.channel2],
          },
        ],
      };
    },
    methods: {
      updateSeries() {
        this.series[0].data = [this.channel1, this.channel2];
      },
    },
    watch: {
      channel1: function (_channel1) {
        this.updateSeries();
        //   this.series[0].data[0] = _channel1;
      },
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>With the <em>Vue DevTools</em> I can see that the data is changing inside the <a href="https://apexcharts.com/" rel="noreferrer">ApexCharts</a> component, but the view is not updated.</p>
  <p>If I take a look in the <a href="https://apexcharts.com/" rel="noreferrer">ApexCharts</a> documentation, I see there is a method to update the series</p>
  <pre class="lang-js prettyprint-override"><code>updateSeries (newSeries, animate)
  </code></pre>
  <p>But I need an instance to call the <code>updateSeries</code> from. If I use the template mechanism, I can't have a reference to that module.</p>
  <p>What is the best way to solve this issue?</p>