Display toaster notification

I have an inertia app. I want to display a toaster notification when CRUD operations. What I did was, create a MainLayout which displays notifications and works as the default layout.

app.js
resolve: (name) => {
        const page = resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue'))

        page.then((module) => {
            module.default.layout = module.default.layout || MainLayout;
        });
	   return page;
},

MainLayout.vue - The following code snippet is responsible for the display notification.

import { toast } from 'vue3-toastify';
watch(() => usePage().props.flash, (flash) => {
   
    if (!flash.message) return;

    toast(flash.message, {
        type: (flash.type) ? flash.type : 'info',
        theme: 'colored'
    });

}, { deep: true })

<template>
    <slot />
</template>

AuthenticatedLayout.vue acts normally with named slots. Is there any better efficiency solution than this?