dispatching an event client-side does not seem to work in comparison to emitting the event on the server

I have a very simple setup page, where there are multiple steps to which the user can navigate to.

They can either do so with the nav bar on the side, or using the 'prev' and 'next' buttons on the bottom.

The nav bar works perfectly fine, it is just a list of buttons with

wire:click="$dispatch('stepChange', { step: '{{ $step }}' }"

However, when I try to replicate the same thing with the 'prev' and 'next' buttons, it doesn't work.

wire:click="$dispatch('stepChange', { step: '{{ $currentStep + $dir }}' })" ($dir is either -1 or 1)

The change only works once for some reason, and nothing happens after I click on them again.

But when I replace the wire:click with the following:

wire:click="handleClick" (handleClick is a function in the Livewire/Component file)

public function handleClick() { $this->dispatch('stepChange', step: $this->currentStep + $this->dir); }

everything is fine and dandy.

Any ideas as to the bug?