Not working in watcher

[benjivm]

Hi, I'm having an issue getting this working with Inertia.js and a watcher. I can trigger the notification with a normal function or hook (e.g., onMounted), but not in a watcher.

Component:

<template>
    <button @click="createToast('test')">Create a toast</button>
</template>

<script setup>
    import { watch } from 'vue';
    import { notify } from 'notiwind';
    import { usePage } from '@inertiajs/inertia-vue3';

    // This doesn't work, even though the console.log()
    // spits out the correct value when it should
    watch(usePage().props, (pageProps) => {
        if (pageProps.toast) {
            console.log(pageProps.toast); // works

            notify({
                group: 'top',
                title: 'Success',
                text: pageProps.toast
            }, 4000);
        }
    }, { deep: true });

    // This works just fine
    function createToast(text) {
        notify({
            group: 'top',
            title: 'Success',
            text: text
        }, 4000);
    }
</script>

My notifications are configured identically to this part of your example code, and work just fine when triggered with the function.

[benjivm]

Wrapping in nextTick() seems to resolve the issue, is this expected?

nextTick(() => {
    notify({
        group: 'top',
        title: 'Success',
        text: pageProps.toast
    }, 4000);
});

[emmanuelsw]

Hi, sorry for the late response, I just tested this in one of our applications and it's working properly, we have something like this:

<script setup>
import { computed, watch } from 'vue'
import { usePage } from '@inertiajs/inertia-vue3'
import { notify } from 'notiwind'

const flash = computed(() => usePage().props.value.flash)

watch(flash, () => {
  notify({
    group: 'bottom',
    title: '...',
    type: 'sucess',
    text: '...',
  }, 5000)
})
</script>

I'm going to close it for now as it seems it's not a problem of the library but feel free to reopen if you find some issues related to this.