Livewire прослушивает изменения событий из библиотеки JS

Я пытаюсь подключить библиотеку js, gridstack, с livewire/apline.js. К сожалению, в Интернете нет ресурсов о том, как заставить его работать с livewire. Я не очень хорошо знаком с js, поэтому я использую стек TALL для разработки, но после долгих исследований GridStack оказался для нас лучшим решением.

Может ли кто-нибудь указать мне правильное направление, как прослушивать события, предоставляемые js-библиотеками, чтобы я мог подключиться к livewire?

Это то, что у меня есть на данный момент, и моя интерактивная сетка загружается правильно. Мне нужно иметь возможность прослушивать изменения, которые происходят, когда элемент перемещается/изменяется в размере/перетаскивается, чтобы я мог сохранить его в серверной части с помощью livewire/laravel.

<div
    x-data = "{
        init() {
            let grid = GridStack.initAll({
                column: 6,
                cellHeight: '60px',
                cellWidth: '100px',
                float: false,
                resizable: {
                    handles: 'e'
                },
                margin: 2
            })
        }
    }"
  >
  <div class = "grid-stack">
     <div class = "grid-stack-item">
        <div class = "grid-stack-item-content">Item 1</div>
     </div>
     <div class = "grid-stack-item" gs-w = "2">
        <div class = "grid-stack-item-content">Item 2 wider</div>
     </div>
  </div>


    @assets
        <script src = "https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/10.1.2/gridstack-all.js" defer></script>
        <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/10.1.2/gridstack.min.css">
        <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/10.1.2/gridstack-extra.min.css">
    @endassets
</div>

Это из API Gridstack , и я считаю, что это то, что мне нужно включить в свой код.

изменение (событие, предметы)

Происходит, когда виджеты меняют свое положение/размер из-за ограничений или прямых изменений.

grid.on('change', function(event: Event, items: GridStackNode[]) {
  items.forEach(function(item) {...});
});

Редактировать

Ultimetley Я пришел к этому из комментариев и отлично работает:

init() {
    let grids = GridStack.initAll({
        column: 6,
        cellHeight: '60px',
        cellWidth: '100px',
        float: false,
        resizable: {
            handles: 'e'
        },
        margin: 2
    });

    grids.forEach(element => {
        element.on('change', function(event, items) {
            let newItems = [];

            items.forEach ((el) => {
                newItems.push({_id: el._id, x: el.x, y: el.y, w: el.w, task_id: el.id});
            });

            $wire.taskMoved(newItems);
        });
    });
}