Laravel 10 Livewire 3 AlpineJS Progress Bar not willing to update

I have an empty view and component made jsut for testing the progressbar:

<div>
    <form wire:submit="save">
        <div class="flex justify-end">
            <input type="file" wire:model="uploadedFiles" id="files" accept="application/pdf" x-ref="uploadFiles"
                   class="hidden" multiple>
            <x-button x-on:click.prevent="$refs.uploadFiles.click();">Neues Dokument hochladen</x-button>
        </div>
        <div class="my-12"
             x-data="{ progress: 10, uploading: false }"
             x-init="$watch('progress', value => {
                if (value > 100) { progress = 100 } if (value == 0) { progress = 10 } })"

             x-on:livewire-upload-start="uploading = true;console.log('Started')"
             x-on:livewire-upload-finish="uploading = false"
             x-on:livewire-upload-cancel="uploading = false"
             x-on:livewire-upload-error="uploading = false"
             x-on:livewire-upload-progress="progress = $event.detail.progress"
        >
            <div x-show="uploading" class="bg-gray-200 rounded h-6 mt-5" role="progressbar"
                 :aria-valuenow="progress" aria-valuemin="0" aria-valuemax="100">
                <div
                    :style="`width: ${progress}%; transition: width 2s;`" x-text="`${progress}%`">
                </div>
            </div>

        </div>
    </form>
    <script>
        document.addEventListener('livewire-upload-start', () => {
            console.log('Caught livewire-upload-start');
        });
        document.addEventListener('livewire-upload-finish', () => {
            console.log('Caught livewire-upload-finished');
        });
    </script>
</div>

console.log('Caught livewire-upload-start'); and console.log('Caught livewire-upload-finished'); get printed, but 'Started' doesn't and x-show="uploading" never triggers, the progress bar is always hidden. If I add an input to test out the progress bar:

<input
                class="border border-gray-500 rounded"
                type="number"
                x-model="progress"
                min="1"
                max="100"
            >

This works and the progress bar is manipulated through alpine JS. But its never called on the livewire-upload-start event. Doesnt matter If I have a form or a div on <form wire:submit="save"> nothing changes. It just doesnt get triggered, but its working correctly

EDIT: The livewire component:

class Document extends Component
{
    use WithFileUploads;

    public $documents = [], $uploadedFiles;
    public function render()
    {
        return view('livewire.upload.document');
    }

    public function save()
    {

    }
}

This is NOT a full page livewire component, its used in a laravel blade template like:

                    <div>
                        @livewire('upload.document')
                    </div>