Send Livewire data from component to JS library

I have a livewire component that incorporates a js library, gridstack.js.

I’ve never tried to incorporate an external js library without a livewire wrapper before. Caleb made it so easy to implement livewire/sortable since I didn’t have to write any js. I’m trying to use Gridstack.js as if I were using Shopify/draggable directly with livewire without using livewire/sortable.

This is what I have so far and my interactive grid loads correctly. I’m able to adjust gridstack items on the page and save them to the database via $wire.taskMoved(newItems) in the @script, all as expected. I need to be able to display a new or edited $task that’s created with livewire. Right now I need refresh the page to see any edited or added $task that was created in the backend.

I started to experiment with this below with the following code. It works, everytime I edit or add a task I receive a console log but I’m not sure what to put here from the gridstack api to have those items updated.

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

I also tried to add wire:key="project-{{$project->id}}" in the $projects foreach and wire:key="task-{{$task->id}}" in the $tasks foreach but it didnt work so I found that wire:ignore on the div works best.

<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.log('HERE after taskAdjusted')
        })
    </script>
@endscript

This is a follow up question to a previous one that you guys were able to help me with, Thank you!