Dispatching the same event before the previous event ends

I'm trying to set up a dispatch event for flash messages. I've currently got it working with the following code.

$this->dispatch('flash-message', message: 'Attendee ' . $this->form->attendeeName . ' (' . $this->form->attendeeEmail . ')' . ' successfully added.');

<div class="container">
    <div class="p-4 mx-auto w-full fixed bottom-0 text-sm text-yellow-800 rounded-lg bg-yellow-100 dark:bg-gray-800 dark:text-yellow-300"
         x-data="{ show: false, message: '' }" x-show="show"
         x-init="$watch('show', value => { if (value) setTimeout(() => show = false, 3000) })"
         x-transition:leave.opacity.duration.3000ms
         x-on:flash-message.window="show = true; message = $event.detail.message"
         x-text="message"
         role="alert">
    </div>
</div>

My issue is that if I try to fire multiple of the same event before the previous event has finished, although the data in the message is updated, the transition doesn't reset. This means if I chain together some quickfire updates, after the first event is fired and the flash message transitions out, I'm not seeing any of the new flash messages unless I dispatch another event after the entire chain is finished (e.g. if I fire 5 events quickly, I have to wait 15 seconds from the first event before I can fire one that shows) . I think it's related to the setTimeout I have in the x-init, which is needed for the transition to work.

Is there anyway for me to reset the transition sequence when a new event is fired or to delay any new events until the previous one is finished?