将 Liveware 更新到 v3 后，Liveware/Fullcalendar 无法正常工作

问：

我使用日历库：带有 livewire 的 Fullcalendar。更新后，出现控制台错误，如下所示livewire "livewire/livewire": "^2.6""livewire/livewire": "^3.0"

“无法读取未定义的属性（读取'事件'）”

calendar:1423 Uncaught TypeError: Cannot read properties of undefined (reading 'events')
    at HTMLDocument.<anonymous> (calendar:1423:70)
    at dispatch (livewire.js?id=2f6e5d4d:316:8)
    at Object.start2 [as start] (livewire.js?id=2f6e5d4d:6693:5)
    at HTMLDocument.<anonymous> (livewire.js?id=2f6e5d4d:7695:17)

我的Livewire类如下：

<?php

namespace App\Livewire;

use Livewire\Component;
use App\Models\Workflow\Orders;
use Illuminate\Support\Facades\DB;

class Calendar extends Component
{
    public $events = '';

    public function render()
    {
        $events =Orders::select('id', 'code AS title', 'validity_date AS start', 'statu AS color', DB::raw("1 as url"))
                            ->get()
                            ->map(function ($order) {
                                $order->color = str_replace('2', "#ffc107", $order->color);
                                $order->color = str_replace('3', "#28a745", $order->color);
                                
                                $order->url = route('orders.show', $order->id);
                                return $order;
                            });
        $this->events = json_encode($events);
        return view('livewire.calendar');
    }
}

我的观点如下：

<div>
    <div>
        <div id="calendar-container" wire:ignore>
            <div id="calendar"></div>
        </div>
    </div>
</div>

@section('js')
    <script src='https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js'></script>
    <script>
        document.addEventListener('livewire:init', function () {
            
            var data =   @this.events;
            const Calendar = FullCalendar.Calendar;
            const calendarEl = document.getElementById('calendar');
            const calendar = new Calendar(calendarEl, 
            {
                events: JSON.parse(data),
                eventColor: '#378006',
                height: 800,
                themeSystem: 'bootstrap',
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                },
                locale: '{{ config('app.locale') }}',
            });
            
            calendar.render();
        });
    </script>
    <link href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.css' rel='stylesheet'>
    <link href='https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.css' rel='stylesheet'>
@stop

在 livewire 迁移文档中，我们看到了语法更改

document.addEventListener('livewire:load', () => {...}) 
document.addEventListener('livewire:init', () => {...}) 

我承认这个错误很常见，但它的完成方式有问题，但是什么？如果您有调试路径或以不同方式做事的方法，我会采取