laravel9 window.livewire.emit is not being triggered

Question

My issue,

I have a page with 2 lists, list ToDo and list Done when an item in list ToDo is dragged to list Done (I'm using jQueryUI draggable) i want to emit an event which updates the lists. However the code in my livewire component is not called. here is my livewire component:

<?php

namespace App\Http\Livewire;

use App\Models\Task;
use Livewire\Component;

class Planner extends Component
{
    public $number;
    public $date;
    public $height;

    protected $listeners = [
        'plannerUpdateTask' => 'updateTask'
    ];

    public function updateTask( $payload )
    {
        $this->date   = $payload['date']; // I have a breakpoint here and xdebug running
        $this->height = $payload['height'];
        $task = $payload['task'];
        $task->date   = $payload['date'];
        $task->hours  = 1;
    }
}

Not sure if it helps but this livewire component has no blade file (and no render function). I believe if an event is emitted then any livewire component with this event should get triggered right?

This page loads a javascript file in the head which has the function that calls the emit:

$(document).ready( function() {
    // Tasks can be dragged into the done section
    $(".task").draggable(
        {
            connectToSortable: ".jobs",
            snap: true,
            zIndex: 1000,
            helper: "clone",
            revert: "invalid",
            stack: ".jobs",
            handle: ".task-head",
            stop: function (event, ui) {
                ui.helper.css("top", "");
                var date = ui.helper.parent().data("date");
                console.debug(date);
                var height = ui.helper.css("height");
                var task = $( this ).data("task");
                alert('before livewire call');
                window.Livewire.emit(
                    'plannerUpdateTask',
                    {
                        task: task,
                        date: date,
                        height: height
                    }
                );
                alert('after livewire call');
            }
        }
    );

}

The drag and drop side is working (ie the todo task can be dragged to the done task list) but the code inside the event is not called.

I looked in the docs and am using Method C: From Global JavaScript (is this not global js if called from the header as a js file?)

I have tried without the window prefix, I've also tried with this and with Livewire or livewire but no combination is making the event fire and the breakpoint in my livewire component is never triggered (i do have it enabled and it is working if i set a breakpoint for something else on this page)

I do realise i can use ajax for this but would prefer livewire if possible? Am I missing something with this?

The alert before the livewire emit and the one after it are both shown.

Lastly I am aware that the updateTask() function is not actually saving the data itself yet but it obviously needs to hit the event in the first place

thanks