如何让Livewire监听GridStack JS库的事件变更？

我正尝试将GridStack JS库与Livewire/Alpine.js结合使用，但网上相关实现资料匮乏。我对JavaScript并不熟悉，采用TALL栈进行开发，调研后确定GridStack是最适合的方案。目前已成功加载交互式网格，需要监听元素移动、调整大小、拖拽时的变更事件，以便通过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>

GridStack 变更事件说明 #

根据GridStack API文档，需要集成change事件来监听网格元素的位置/大小变更：

change(event, items)
当组件因限制或直接操作改变位置/大小时触发

官方示例代码：

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

最终可行实现 #

经过参考调整，最终实现了可监听变更并同步到Livewire的代码：

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

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