Partial broken highchart when using with AlpineJS V3

[Alph44rchitect]

Hello together I need your help!

I'm working on a project where I use a combination of Highchart and AlpineJS. First of all my solution worked with AlpineJS V2 but not properly after the V3 migration.

When I call a function like addSeries on my chart variable, the chart starts flickering every second datapoint while hovering over with the mouse. I think the problem is maybe related to the case that AlpineJS is wrapping the variable with a proxy object.

---

Here is a part of the important code.

Alpine.data("highchart", () => ({
  chart: null,

  init() {
    this.chart = Highcharts.chart(this.$refs.chart, {
      series: [
        {
          data: [
            [1016060400000, 105],
            [1016146800000, 185],
            [1016406000000, 145],
            [1016492400000, 100]
          ]
        }
      ]
    })
  },

  addSeries() {
    this.chart.series[0].remove()

    this.chart.addSeries({
      data: [
        [1016060400000, 100],
        [1016146800000, 0],
        [1016406000000, 125],
        [1016492400000, 100],
        [1016578800000, 120]
      ]
    })
  }
}))

Steps to reproduce the problem:

1. Hover along the chart. (Everything as expected)
2. Press Change series button
3. Hover again along the chart and see the flickering

Codesandbox example with AlpineJS V3 not working as expected

https://codesandbox.io/s/broken-highcharts-with-alpinejs-v3-orusz

Codesandbox example with AlpineJS V2 working as expected.

https://codesandbox.io/s/working-highcharts-with-alpinejs-v2-puc5f

---

I'm out of ideas. I hope somebody can help me.

Greetings
Lars

[SimoTod]

This should be a working version for V3: https://codesandbox.io/s/broken-highcharts-with-alpinejs-v3-forked-dlx8h?file=/index.html

The reason is that in V2, only literal objects and arrays were properly reactive. The Alpine reactivity is based on javascript object called proxies. IN v3, all object became reactive and those libraries often don't work smoothly with javascript proxy.
Moving the chart object outside of the returned Alpine data will do the trick

[Alph44rchitect]

Yea! Thank you for your fast answer that fixed!!

I was already blind by trying to fix it. I tried changing the context before but for the event listener function and not the Alpine data function. There of course I was overwriting the context always with the other chart.

Nevermind thanks again! :)