Type of chart not updated properly when provided via `options.chart.type`

[christian-judt]

When initially providing the vue3-apexcharts component with its chart type via the vue-property options (by provinding options .chart.type) everything works fine. When I then change the chart type by the same means, various problems of varying serverity occur depending on the exact initial and the exact updating chart type.

Reproduction:

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

• HTML:

  <div id="appl">
  <button @click="toggleChartType">Toggle Chart Type</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: { // replace "bar" with "line" here to reproduce the problems // occuring when transitioning from a line chart to a bar chart options: { chart: { type: "bar" }}, series: [{ data: [[1, 34], [2, 43], [3, 31], [4, 43], [5, 33], [6, 52]] }] }, methods: { toggleChartType() { this.options = { ...this.options, chart: { ...this.options.chart, type: this.options.chart.type === 'bar' ? 'line' : 'bar' }}; } } });

I do not consider this a serious problem, since it can simply be worked around by using the vue-property `type` instead of the property `options` to initialize and update the chart type, but it should be a relatively simple fix on your end too.