Laravel Inertia JS Flash Messages shows only once

Question

Because InertiaJS doesn't refresh same route components, things like flash messages will show only once no matter how many time you pass messages from the backend. I tried everything but nothing works, All I need is to be able to trigger the same flash message again after I fail doing the same action.

Controller: This should be triggered as part of validation I'm making by some if statements, so basically I'm saying if the quantity requested more than stock quantity return this flash message.

                    return back()->with([
                        'error' => 'This item has only ' . $item->qty . ' items in stock'
                    ]);

The flash component:

<script setup>
import { ref, onMounted } from "vue";
defineProps({
    message: Object,
});

const showNotif = ref(false);

let msgs = ref([]);

onMounted(() => {
    showNotif.value = true;
    setTimeout(() => {
        showNotif.value = false;
    }, 6000);
});
</script>

<template>
    <div>
        <Transition
            mode="out-in"
            name="flash"
            tag="div"
            enter-active-class="animate__animated animate__fadeInUp"
            leave-active-class="animate__animated animate__fadeOutDown"
            appear
        >
            <p
                v-if="message.error && showNotif"
                class="cursor-pointer fixed bottom-3 right-3 bg-red-600 px-5 py-1 font-semibold text-white rounded-xl"
            >
                {{ message.error }}
            </p>
        </Transition>
        <Transition
            mode="out-in"
            name="flash"
            tag="div"
            enter-active-class="animate__animated animate__fadeInUp"
            leave-active-class="animate__animated animate__fadeOutDown"
            appear
        >
            <p
                v-if="message.success && showNotif"
                class="cursor-pointer fixed bottom-3 right-3 bg-green-600 px-5 py-1 font-semibold text-white rounded-xl"
            >
                {{ message.success }}
            </p>
        </Transition>
    </div>
</template>

This works fine, the flash shows up, spent few seconds and then disappear. but no matter how many times I click on the same button to get this flash message it never happens and my brain is about to explode!