Unable to call component method. Public method [addComment] not found on component: [comment-table]

So This was working previously (last edited april) but after returning to this for testing after further work it is now failing. The comment-table loads fine but when i click it's button it first renders the popup form and then throws the above error (Unable to call component method. Public method [addComment] not found on component: [comment-table]) The add-comment is using LivewireUI\Modal\ModalComponent.

The LivewireUI Modal Component is loaded in my composer and is in my vendor folder.

Heres the 2 livewire components: CommentTable.php

<?php

namespace App\Http\Livewire;

use App\Models\Job;
use App\Models\Style;
use Livewire\Component;

class CommentTable extends Component
{
    public Job $job;

    protected $listeners =['refresh' => '$refresh'];

    public function mount( Job $job )
    {
        $this->job = $job;
    }

    public function render()
    {
        return view('livewire.comment-table');
    }

}

comment-table.blade.php

<div>
    <form wire:submit.prevent="addComment()">
    @if ( count( $job->comments ) > 0 )
        <table class="{{ getAppearances( 'table', 'class' ) }}">
            <thead>
            <th style="width:70%">Comment</th>
            <th>Date</th>
            <th>By Whom?</th>
            <th> </th>
            </thead>
            <tbody>
            @foreach( $job->comments as $comment )
                <tr class="p-1 odd:bg-gray-200 even:bg-gray-50 odd:dark:bg-gray-700 even:dark:bg-gray-800">
                    <td>{{ $comment->comment }}</td>
                    <td>{{ $comment->date }}</td>
                    <td>{!! $comment->user->getProfileImage() !!}</td>
                    <td>
                @if( $comment->user->id === auth()->id() )
                            <a
                                class="cursor-pointer"
                                wire:click="$emit( 'openModal', 'edit-comment',{{ json_encode(['job_number' => $job->number, 'comment_id' => $comment->id, 'comment' => $comment->comment]) }} )"
                            >
                                {!! config( 'ecl.EDIT' ) !!}
                            </a>
                            <a
                                class="cursor-pointer"
                                wire:click="$emit( 'openModal', 'delete-comment',{{ json_encode(['comment_id' => $comment->id]) }} )"
                            >
                                {!! config( 'ecl.DELETE' ) !!}
                            </a>
                @else
                    @can('edit-comments')
                        <a
                            class="cursor-pointer"
                            wire:click="$emit( 'openModal', 'edit-comment',{{ json_encode(['job_number' => $job->number, 'comment_id' => $comment->id, 'comment' => $comment->comment]) }} )"
                        >
                            {!! config( 'ecl.EDIT' ) !!}
                        </a>
                    @else
                        <a
                            class="cursor-not-allowed"
                        >
                            {!! config( 'ecl.LOCK' ) !!}
                        </a>&nbsp;
                    @endcan
                    @can('delete-comments')
                            <a
                                class="cursor-pointer"
                                wire:click="$emit( 'openModal', 'delete-comment',{{ json_encode(['comment_id' => $comment->id]) }} )"
                            >
                                {!! config( 'ecl.DELETE' ) !!}
                            </a>
{{--                            <a class="cursor-pointer" wire:click="deleteComment({{ $comment }})">{!! config( 'ecl.DELETE' ) !!}</a>--}}
                    @else
                        <a
                            class="cursor-not-allowed"
                        >
                            {!! config( 'ecl.LOCK' ) !!}
                        </a>
                    @endcan
                @endif
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    @else
        <p>No Comments have been made for this job. You can create a comment by adding a work item or from the button below this table.</p>
    @endif
        <br>
        <x-jet-button wire:click="$emit( 'openModal', 'add-comment',{{ json_encode(['job_number' => $job->number]) }} )">
            {{ __('Add') }}
        </x-jet-button>
    </form>
</div>

AddComment.php

<?php

namespace App\Http\Livewire;

use App\Mail\JobComment;
use Illuminate\Support\Facades\Mail;
use LivewireUI\Modal\ModalComponent;

class AddComment extends ModalComponent
{
    public string $comment = '';
    public int $job_number;

    protected $listeners =['refresh' => '$refresh'];

    public function render()
    {
        return view('livewire.add-comment');
    }

    public function create()
    {
        $data = $this->validate([
            'comment' => 'required|min:6'
        ]);

        $data['date']       = date('Y-m-d');
        $data['job_number'] = $this->job_number;
        $data['user_id']    = auth()->id();
        JobComment::create( $data );

        Mail::to( auth()->user() )
            ->send(new JobComment($this->job));

        $this->closeModal();
        $this->emit( 'refresh' );
    }

    public static function closeModalOnEscape(): bool
    {
        return false;
    }

    public static function destroyOnClose(): bool
    {
        return true;
    }
}

add-comment.blade.php

<x-modal formAction="create">
    <x-slot name="title">
        Add a Comment
    </x-slot>

    <x-slot name="content">
        <label for="comment">Comment Narrative:</label>
        <textarea wire:model.defer="comment" id="comment" rows="4" cols="36">{{ $comment }}</textarea>
        @error('comment') <span class="text-danger">{{ $message }}</span> @enderror
    </x-slot>

    <x-slot name="buttons">
        <x-jet-button class="mx-2" type="submit">
            {{ __('Submit') }}
        </x-jet-button>
        <x-jet-button type="button" class="mx-2" wire:click="$emit('closeModal')">
            {{ __('Close') }}
        </x-jet-button>
    </x-slot>
</x-modal>

Any idea? p.s. The config( 'ecl.BLAH' ) references a font awesome icon to use

thanks