Apexcharts.js: Updating options for a grouped chart makes all of the charts get the same options

[x42y]

Demo: https://codesandbox.io/s/vue-apexcharts-sync-annotation-problem-kz2ff

Steps to reproduce: Click on the Set annotation button

• What is the behavior you expect?
  The first chart gets an annotation between the first and the second xaxis point, while the second chart gets an annotation between the sixth and the seventh point.

• What is happening instead?
  Both charts get an annotation between the sixth and the seventh point.

This only happens to grouped charts - if I remove group: "sameGroup", the problem goes away.

[x42y]

It seems like it doesn't matter if you only update one chart, the effect is still the same. I have updated the demo to simplify (removed for-loop which updated both charts with different options)

[junedchhipa]

For the time being, I suggest using the exec() method for updating a chart in a grouped charts situation.
https://apexcharts.com/docs/methods/#exec

[thellimist]

I'm having this issue when modifying data.

https://codesandbox.io/s/react-basic-example-8cn4q?fontsize=14&hidenavigation=1&theme=dark

[junedchhipa]

@thellimist A workaround for now is to use the ApexCharts.exec method.
In your codesandbox, I tried this and it worked fine.

    ApexCharts.exec('series1', 'updateSeries', copySeries1)
    ApexCharts.exec('series2', 'updateSeries', this.series2)

[thellimist]

https://codesandbox.io/s/react-basic-example-ky41h @junedchhipa

For the example above your solution works. But, I can't make it work where the Chart render component does not have idea about how many others are being rendered so each chart needs to call ApexCharts.exec themselves or the caller (in the example case App should call ApexCharts.exec.

Basically I want the sync to work in this kind of a setup. Would appriciate your help.

Thanks