Reactivity not working Laravel, Inertia.js, Vue3

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,
            ]
        ]);
}