Liveware/Fullcalendar not working after update Liveware to v3

Question

I use the calendar library: Fullcalendar with livewire. After updating livewire "livewire/livewire": "^2.6", to "livewire/livewire": "^3.0", I get a console error like

"Cannot read properties of undefined (reading 'events') "

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)

my livewire class is as follows :

<?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');
    }
}

my view is as follows:

<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

On the livewire migration documentation, we see the syntax changes

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

I recognize that the error is quite common, but something is wrong with the way it is done, but what? if you have debugging paths or ways of doing things differently I will take