I can't get session value in script setup vue3 composition API - laravel

Question

I managed to make a new project with inertiajs new version and Laravel 8 and vue 3. I want to make a toast component which will show when flash message has value in the handleinertia middleware.
My only problem is I can't seem to get the session value it is null all the time in usePage();. BUT the
{{ $page.props.flash.message }}
in Notification.vue displays it.
My question is, how can I get the session over router.on("finish") so that I can only show it when there is session.
I left some comments in the code, I can't explain well in English :-C
Controller:
return redirect()->route('users')->with('message', 'User created');
HandleInertiaRequests.php
public function share(Request $request): array
{
return array_merge(parent::share($request), [
'flash' => [
'message' => fn () => $request->session()->get('message'),
'alert_message' => fn () => $request->session()->get('alert_message'),
'error' => "check",
],
]);
}
Notification .vue
<script setup>
import { ref, watch, onUnmounted, onMounted } from 'vue'
import { CheckCircleIcon } from '#heroicons/vue/24/outline'
import { XMarkIcon } from '#heroicons/vue/20/solid'
import { usePage, router } from '#inertiajs/vue3'
const page = usePage();
const show = ref(false)
let removeFinshEventListener = router.on("finish", () => {
// I ALWAYS GET NULL VALUES HERE BUT IN THE HTML BELOW I GET THE SESSION
console.log(page.props.flash, page.props.flash.message)
show.value = true
if (page.props.flash.message) {
}
});
onUnmounted(() => removeFinshEventListener());
function remove(index) {
toast.remove(index);
}
</script>
<template>
<!-- Global notification live region, render this permanently at the end of the document -->
<div aria-live="assertive" class="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6">
<div class="flex w-full flex-col items-center space-y-4 sm:items-end">
<!-- Notification panel, dynamically insert this into the live region when it needs to be displayed -->
<transition
enter-active-class="transform ease-out duration-300 transition"
enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2" enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
leave-active-class="transition ease-in duration-100"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div v-if="show" class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
<div class="p-4">
<div class="flex items-start">
<div class="flex-shrink-0">
<CheckCircleIcon class="h-6 w-6 text-green-400" aria-hidden="true" />
</div>
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-sm font-medium text-gray-900">Successfully saved!</p>
// THE SESSION MESSAGE DISPLAYS HERE BUT NOT IN THE usePage(); ABOVE
<p class="mt-1 text-sm text-gray-500">{{ $page.props.flash.message }}</p>
</div>
<div class="ml-4 flex flex-shrink-0">
<button type="button" #click="show = false" class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
<span class="sr-only">Close</span>
<XMarkIcon class="h-5 w-5" aria-hidden="true" />
</button>
</div>
</div>
</div>
</div>
</transition>
</div>
</div>
</template>
Layout.vue
<template>
<div class="min-h-full">
<Notification></Notification>
<mobile-sidebar
:sidebarOpen="sidebarOpen"
#close="sidebarOpen = false"
></mobile-sidebar>
<!-- Static sidebar for desktop -->
<sidebar></sidebar>
<!-- Main column -->
<div class="flex flex-col lg:pl-64">
<mobile-header #sidebarOpen="sidebarOpen = true"></mobile-header>
<main class="flex-1">
<slot></slot>
</main>
</div>
</div>
</template>
<script setup>
import { ref, watch, onUpdated } from "vue";
import MobileHeader from "#/Shared/MobileHeader";
import MobileSidebar from "#/Shared/MobileSidebar";
import Sidebar from "#/Shared/Sidebar.vue";
import Alert from "#/Shared/Alert.vue";
import { usePage } from '#inertiajs/vue3'
const sidebarOpen = ref(false);
</script>