diff --git a/bootstrap/app.php b/bootstrap/app.php
index ddf48a84..2805c8b3 100644
--- a/bootstrap/app.php
+++ b/bootstrap/app.php
@@ -42,7 +42,7 @@
                     ->setStatusCode($response->getStatusCode());
             } elseif ($response->getStatusCode() === 419) {
                 return back()->with([
-                    'flash_message' => 'The page expired, please try again.',
+                    'flash_warn' => 'The page expired, please try again.',
                 ]);
             }
 
diff --git a/resources/js/components/FlashMessages.vue b/resources/js/components/FlashMessages.vue
index d3f3aa22..da71cfec 100644
--- a/resources/js/components/FlashMessages.vue
+++ b/resources/js/components/FlashMessages.vue
@@ -1,16 +1,19 @@
 <script setup>
-import { ref, onUnmounted } from 'vue';
-import { usePage, router } from '@inertiajs/vue3';
+import { ref, watch } from 'vue';
+import { usePage } from '@inertiajs/vue3';
 import { Check, Info, TriangleAlert, CircleAlert, Megaphone } from 'lucide-vue-next';
 
 const page = usePage();
-const requestsKey = ref(0);
-onUnmounted(router.on('finish', () => requestsKey.value++));
+const flashed = ref(0);
+
+watch(() => page.props.flash, () => {
+    flashed.value++;
+}, { deep: true });
 </script>
 
 <template>
     <div
-        :key="requestsKey"
+        :key="flashed"
         class="m-0"
     >
         <Message