Отправка данных Livewire из компонента в библиотеку JS

У меня есть компонент livewire, включающий библиотеку js, gridstack.js .

Это то, что у меня есть на данный момент, и моя интерактивная сетка загружается правильно. Я могу настроить элементы стека сетки на странице и сохранить их в базе данных через $wire.taskMoved(newItems) в @script, все, как и ожидалось, в реальном времени и без какого-либо обновления. Мне нужна возможность отображать новые или отредактированные $task, созданные с помощью Livewire. Прямо сейчас мне нужно обновить страницу, чтобы увидеть все отредактированные или добавленные $task, созданные в серверной части.

<div>
    @foreach($projects as $project)
        <div class = "grid-stack gs-id-{{$project->id}}" id = "{{$project->id}}" wire:ignore>
            @foreach($days as $day_index => $day)
                @foreach($day->tasks as $task)
                    <div class = "grid-stack-item" gs-x = "{{$day_index}}" gs-w = "{{$task->duration}}" gs-y = "1" gs-id = "{{$task->id}}">
                        <div
                            wire:click = "$dispatchTo('tasks.task-create', 'editTask', { task_id: {{$task->id}} })"
                            class = "grid-stack-item-content"
                            >
                            <span>{{$task->title}}</span>
                        </div>
                    </div>
                @endforeach
            @endforeach
        </div>
    @endforeach

    <livewire:tasks.task-create :projects = "$projects" :days = "$days"/>
</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

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

        grids.forEach(grid => {
            grid.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)
            })
        })

        document.addEventListener('taskAdjusted', () => {
            console.info('HERE after taskAdjusted')
        })
    </script>
@endscript

Я начал экспериментировать с этим, используя следующий код: Он работает, каждый раз, когда я редактирую или добавляю задачу, я получаю журнал консоли, но я не уверен, что сюда поместить из API Gridstack, чтобы обновить $task. .

document.addEventListener('taskAdjusted', () => {
   console.info('HERE after taskAdjusted')
})

Я также пытался добавить wire:key = "project-{{$project->id}}" в $projects foreach и wire:key = "task-{{$task->id}}" в $tasks foreach, но это не сработало, поэтому я обнаружил, что wire:ignore в div работает лучше всего.

Это дополнительный вопрос к предыдущему вопросу, с которым вы, ребята, смогли мне помочь. Спасибо!