Loading Livewire component breaks page.

Hi so im new to live wire im trying to fire a method in my component but when I use the @livewire('new-category') directive the page does not load and throws an error after 60 seconds. I cant seem to find out what is wrong here is part of my blade file:

<div class="card">
    <div class="form-group">
        <label for="category_name">Category Name</label>
        <input type="text" wire:model="categoryName" id="category_name" class="form-control">
    </div>
    
    <div class="row">
        <div class="col-md-6">
            <h3>Session Columns</h3>
            <button type="button" wire:click="addSessionColumn" class="btn btn-primary">New</button>
            <div wire:sortable="sessionColumns">
                @foreach($sessionColumns as $index => $column)
                <div class="form-group" wire:key="session-{{ $index }}">
                    <input type="text" wire:model="sessionColumns.{{ $index }}.name" class="form-control">
                    <button type="button" wire:click="removeSessionColumn({{ $index }})" class="btn btn-danger">Remove</button>
                </div>
                @endforeach
            </div>
        </div>

could you please help I've been stuck on it for quite a while. thanks in advance