Broadcsting an event breaks redirect / response

Hello,

I'm running into a strange issue with Reverb, and I'm hitting walls trying to figure it out.

I have a modal. In this modal, you fill in some fields to create a task.

On successful form submission, the modal should close, but when using Reverb, it doesn't.

It doesn't matter which channel type I use.

I did some digging, it looks like the issue is because I'm using ShouldBroadcastNow. Using ShouldBroadcast resolves that problem, but introduces another one. The change is now queued and doesn't happen instantly anymore.

TaskController.php

public function store(StoreTaskRequest $request, TaskList $taskList): RedirectResponse
{
    Gate::authorize('create', TaskList::class);

    $taskList->tasks()->create($request->validated());

    TaskListUpdated::dispatch($taskList);

    return to_route('task-lists.show', ['taskList' => $taskList]);
}

CreateTask.vue (modal)

<form @submit.prevent="submit(close)">
    <!-- form fields -->

    <Button :disabled="form.processing" large rounded type="submit" label="Luo tehtävä" primary />
</form>

const submit = (close) => {
    form.post(route('tasks.store', { taskList: props.taskList.slug }), {
        onSuccess: () => {
            close();

            form.reset();
        },
    });
};

Here's what my event looks like:

final class TaskListsUpdated implements ShouldBroadcastNow
{
    use Dispatchable;
    use InteractsWithSockets;
    use SerializesModels;

    /**
     * @return array<int, Channel>
     */
    public function broadcastOn(): array
    {
        return [
            new Channel('task.lists'), // this was originally a presence channel
        ];
    }
}

How can I not hold up the response while still broadcasting instantly? I'm losing my mind figuring this out.

As a temporary workaround, I have changed onSuccess to onFinish.

onFinish: () => {
    if (!form.hasErrors) {
        close();

        form.reset();
    }
},