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.