Error in browser console when dynamically adding opposite y-axes.

[christian-judt]

When initially providing the vue3-apexcharts component with a standard y-axis and series and then updating the option-y-axis-array and series-array to additionally show another series with an additional opposite y-axis an error "Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'group')" appears in the browser console.

Reproduction:

• CodePen: https://codepen.io/ming-syue/pen/ZEGazXq

• HTML

  <div id="appl">
  <button @click="toggleOpposite">
  <template v-if="opposite">Remove</template>
  <template v-else>Add</template> Opposite Axis
  </button>
  <div id="chart">
  <apexchart width="500" :options="options" :series="series"></apexchart>
  </div>
  </div>

• JS:

  
  Vue.component('apexchart', VueApexCharts);

var app = new Vue({ el: '#appl', data: { opposite: false }, computed: { options() { return { chart: { id: 'vuechart-example' }, yaxis: [{ seriesName: 'series-1' }, this.opposite && { opposite: true, seriesName: 'series-2' }].filter(a => a) }; }, series() { return [{ name: 'series-1', data: [[1, 34], [2, 43], [3, 31], [4, 43], [5, 33], [6, 52]] }, this.opposite && { name: 'series-2', data: [[1, 5.2], [2, 3.3], [3, 4.3], [4, 3.1], [5, 4.3], [6, 3.4]] }].filter(a => a); } }, methods: { toggleOpposite() { this.opposite = !this.opposite; } } });

I do not consider this a serious problem, since everything else works fine and it can simply be worked around by calling the "destroy" method of the vue3-apexcharts-component every time before the series are being updated, but maybe this error points at a more serious problem in how the vue3-apexcharts component updates its apexchart.