Charts stop working when adding series in chart options

[darkons]

For some reason, adding series inside options object makes the chart stop working when update.

Using Laravel 10 + Inertia Vue stack.

$chart = new Chart();

return Inertia::render('Dashboard', [ 
    'chart' => fn () => $chart->setType('bar')
        ->setHeight(300)
        ->setWidth('100%')
        ->setDataset('Some name', 'bar', [1])
        ->setXaxisCategories(['Some category'])
        ->toVue()
]);

<script setup>
  defineProps({
    chart: Object,
  });
  
  const updateChart = () => {
    router.reload({
      only: ['chart'],
    })
  }
</script>

<template>
  <apexchart
    :type="chart.type"
    :width="chart.width"
    :height="chart.height"
    :series="chart.series"
    :options="chart.options"
  />
  
  <button @click="updateChart()">Update</button>
</template>

This example will break the chart throwing DOMException: Proxy object could not be cloned. in the browser console.

After commenting out this lines in Chart.php class, everything works fine:

public function setSeries(array $series): Chart
{
    $this->series = $series;

    /* $this->setOption([
        'series' => $series,
    ]); */

    return $this;
}

If you need more information, please just ask me :wink: