Reactivity not working Laravel, Inertia.js, Vue3 - laravel

Question

I am using inertiajs and vue3 on my laravel project.
Problem:
When I try to login with an invalid credential toast message appears and disappears with animation as intended.
But after correct login toast message appear without animation, and doesn't disappear after a certain interval. Also same happens on logout
Toast Component
<template>
<transition
enter-active-class="transition-all ease-out duration-200"
enter-from-class="transform opacity-0 top-32 scale-95"
enter-to-class="transform opacity-100 top-22 scale-100"
leave-active-class="transition-all top-22 ease-in duration-200"
leave-from-class="transform opacity-100 scale-100"
leave-to-class="transform top-12 opacity-0 scale-95">
<div v-if="toast && show == true" class="absolute flex flex-col max-w-lg top-20 right-2 shadow-lg rounded pl-4 pr-2 pt-0 pb-2
bg-white/95 dark:bg-gray-800/95"
:class="{
'bg-green-600 dark:bg-green-600 shadow-green-600/40': toast.type == 'success',
'bg-red-600 dark:bg-red-600 shadow-red-600/40': toast.type == 'error'
}">
<div class="flex mb-2">
<div class="font-semibold"
:class="{
'text-white dark:text-white': toast.type == 'success',
'text-red-200 dark:text-red-200 hover:text-red-50 dark:hover:text-red-50': toast.type == 'error'
}">
{{toast.header}}
</div>
<button #click.prevent="show = false" class="focus:outline-none ml-auto"
:class="{
'text-green-200 dark:text-green-200 hover:text-green-50 dark:hover:text-green-50': toast.type == 'success',
'text-red-200 dark:text-red-200 hover:text-red-50 dark:hover:text-red-50': toast.type == 'error'
}" >
<XCircleIcon class="w-6 h-6" />
</button>
</div>
<div class="flex mr-6 items-center">
<div class="mr-2">
<CheckCircleIcon v-if="toast.type == 'success'" class="w-6 h-6"
:class="{
'text-green-50 dark:text-green-50': toast.type == 'success',
}" />
<XCircleNoFillIcon v-if="toast.type == 'error'" class="w-6 h-6"
:class="{
'text-red-50 dark:text-red-50': toast.type == 'error'
}" />
</div>
<div class="flex-1"
:class="{
'text-green-50 dark:text-green-50': toast.type == 'success',
'text-red-50 dark:text-red-50': toast.type == 'error'
}">
{{toast.message}}
</div>
</div>
</div>
</transition>
</template>
<script>
import { defineComponent, computed, reactive, watch, ref } from 'vue'
import { usePage } from '#inertiajs/inertia-vue3'
import CheckCircleIcon from '#/Icons/CheckCircle.vue'
import XCircleIcon from '#/Icons/XCircle.vue'
import XCircleNoFillIcon from '#/Icons/XCircleNoFill.vue'
export default defineComponent({
components: {
CheckCircleIcon, XCircleIcon, XCircleNoFillIcon,
},
setup() {
const toast = ref(computed(() => usePage().props.value.toast))
const show = ref(true)
watch(toast, () => {
setTimeout(() => {
show.value = true
}, 10);
hideToast()
})
function hideToast() {
setTimeout(() => {
console.log( toast.value.duration)
show.value = false
}, toast.value.duration);
}
return { toast, show }
},
})
</script>
AuthController
// Sign in
public function store(Request $request)
{
$credentials = Validator::make($request->all(), [
'email' => ['required', 'string', 'email', 'max:255'],
'password' => ['required', Rules\Password::defaults()],
]);
if($credentials->fails()) {
return back()
->withInput()
->withErrors($credentials)
->with([
'toast' => [
'duration' => '6000',
'type' => 'error',
'header' => 'Validation Error.',
'message' => 'Please resolve the issues.',
]
]);
}
if (!Auth::attempt($credentials->validated(), $request->remember ? true : false)) {
return back()
->withInput()
->withErrors(['email' => 'Invalid credentials'])
->with([
'toast' => [
'duration' => '1000',
'type' => 'error',
'header' => 'Failed!',
'message' => 'Invalid credentials.',
]
]);
}
$request->session()->regenerate();
return redirect()
->intended(RouteServiceProvider::HOME)
->with([
'toast' => [
'duration' => '5000',
'type' => 'success',
'header' => 'Signed in.',
'message' => 'Welcome back, ' . Auth::user()->name,
]
]);
}