使用Alpine.js和Livewire更新Chart.js标签致图表异常

我用Alpine.js搭配Livewire实现Chart.js图表的动态更新，通过双向绑定每30秒更新一次图表。仅更新数值时，图表可长期正常运行；但同时更新标签时，仅能正常工作2次后就出现异常（图表中存在不应有的斜直线）。我尝试先清空数值再重置，但无任何效果。

相关代码 #

<div wire:ignore x-data="{
fillColor: @entangle('fillColor').live,
lineColor: @entangle('lineColor').live,
chartData: @entangle('chartData').live,
timeframe: @entangle('timeframe').live,
init() {
    const Labels = this.chartData.map(item => item.time);
    const Values = this.chartData.map(item => item.close);

//MORE STYLING and SETTINGS for Chart.JS

Livewire.on('updateChart', () => {
        {{-- chart.data.datasets[0].data.pop(); --}}
        chart.data.labels = this.chartData.map(item => item.time);
        chart.data.datasets[0].data = this.chartData.map(item => item.close);
        chart.update();
    });

异常截图 #

内容的提问来源于stack exchange，提问作者Andrew Lindemulder