Vue Composition Reactive properties are not updating in components

I'm building out a notification system and it's sorta working, but sorta not. I have the follow Composition function

const data                 = reactive({
    notifications: []
});
export const useNotification = () => {
    const visibleNotifications = computed(() => {
        return data.notifications.filter(notification => notification.visible === true).reverse();
    });

    const add = (notification: INotification) => {
        notification.visible = true;
        data.notifications.push(notification);

        notificationTimer[notification.key] = setTimeout(() => {
            remove(notification.key);
        }, 15000);
    };

    const remove = (notificationKey: number) => {
        const notificationIndex = data.notifications.findIndex(notification => notification?.key === notificationKey);
        if (notificationIndex > -1) {
            data.notifications[notificationIndex].visible = false;
        }
    };

    const click = (notification: INotification) => {
       /// ... click code 
    };

    return {
        visibleNotifications,
        add,
        remove,
        click
    };
};

This is working (It's been simplified a little bit). Now, I have two entry points in Webpack. In one entry point (auth), I have the following code to load up a Vue Component for showing the Notification

 Promise.all([
    import(/* webpackChunkName: "Vue"*/ 'vue'),
    import(/* webpackChunkName: "@vue/composition-api"*/ '@vue/composition-api'),
    import(/* webpackChunkName: "Notifications"*/'components/Notifications.vue')
]).then((
    [
        { default: Vue },
        { default: VueCompositionAPI },
        { default: Notifications },
    ]) => {
    Vue.use(VueCompositionAPI);

    new Vue({
        render: h => h(Notifications)
    }).$mount('.notification-outer);
});

Now, this all works, and I add in there the following code

import { useNotification } from 'modules/compositionFunctions/notifications';
useNotification().add({
    title  : 'Error',
    message: 'This is an error notification',
    type   : 'error',
});

Then the notification shows as expected This is all happening inside the "auth" entry point, and the above is all typescript.

Now, if I go to my second entry point (editor), and in an existing JS file enter the following code

import(/* webpackChunkName: "useNotification"*/ 'modules/compositionFunctions/notifications').then(({ useNotification }) => {
    useNotification().add({
        title     : 'Block Deleted',
        message   : 'The block has been deleted',
        buttonText: 'Undo',
        buttonFunction () {
            undoDelete();
        }
    });
});

Then it "works", and by this I mean, all of the code from the useNotification function works. The add method will add it, (if I console log out the reactive property), and after 15000ms, the remove methods happens and I can add logs to show that. HOWEVER, the Vue component never sees this change. If I add a watch in the Vue Component, and log out as we go, the first notification (image above) will make JS log to the console, however, when adding it from the "editor" entry point, it won't do anything.

Vue Component JS

import { useNotification } from 'modules/compositionFunctions/notifications';
import { defineComponent } from '@vue/composition-api';

export default defineComponent({
    name : 'Notifications',
    setup () {
        const { visibleNotifications, remove, click: notificationClick } = useNotification();

        return {
            visibleNotifications,
            remove,
            notificationClick,
        };
    },
    watch: {
        visibleNotifications: (v) => {
            console.log(v);
        }
    }
});

PLEASE, someone, tell me they can help? This is starting to do my head in...

TIA

from Vue Composition Reactive properties are not updating in components