title: Vue Composition Reactive properties are not updating in components
body: <p>I'm building out a notification system and it's sorta working, but sorta not. I have the follow Composition function</p>
  <pre><code>const data = reactive({
      notifications: []
  });
  let notificationKey = 0;
  
  export const useNotification = () =&gt; {
      const visibleNotifications = computed(() =&gt; {
          return data.notifications.slice().reverse();
      });
  
      const add = (notification: INotification) =&gt; {
          notification.key  = notificationKey++;
          notification.type = notification.type ?? 'success';
  
          notification.icon      = iconObject[notification.type];
          notification.iconColor = iconColorObject[notification.type];
          data.notifications.push(notification);
  
          notificationTimer[notification.key] = new Timer(() =&gt; {
              remove(notification.key);
          }, notificationTimeout);
      };
  
      const remove = (notificationKey: number) =&gt; {
          const notificationIndex = data.notifications.findIndex(notification =&gt; notification?.key === notificationKey);
          if (notificationTimer[notificationKey] !== undefined) {
              notificationTimer[notificationKey].stop();
          }
          if (notificationIndex &gt; -1) {
              data.notifications.splice(notificationIndex, 1);
          }
      };
  
      const click = (notification: INotification) =&gt; {
         /// ... click code 
      };
  
      return {
          visibleNotifications,
          add,
          remove,
          click
      };
  };
  </code></pre>
  <p>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</p>
  <pre><code> Promise.all([
      import(/* webpackChunkName: &quot;Vue&quot;*/ 'vue'),
      import(/* webpackChunkName: &quot;@vue/composition-api&quot;*/ '@vue/composition-api'),
      import(/* webpackChunkName: &quot;Notifications&quot;*/'components/Notifications.vue')
  ]).then((
      [
          { default: Vue },
          { default: VueCompositionAPI },
          { default: Notifications },
      ]) =&gt; {
      Vue.use(VueCompositionAPI);
  
      new Vue({
          render: h =&gt; h(Notifications)
      }).$mount('.notification-outer);
  });
  </code></pre>
  <p>Now, this all works, and I add in there the following code</p>
  <pre><code>import { useNotification } from 'modules/compositionFunctions/notifications';
  useNotification().add({
      title  : 'Error',
      message: 'This is an error notification',
      type   : 'error',
  });
  </code></pre>
  <p>Then the notification shows as expected<a href="https://i.stack.imgur.com/8zMPg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8zMPg.png" alt="notification image" /></a> This is all happening inside the &quot;auth&quot; entry point, and the above is all typescript.</p>
  <p>Now, if I go to my second entry point (editor), and in an existing JS file enter the following code</p>
  <pre><code>import(/* webpackChunkName: &quot;useNotification&quot;*/ 'modules/compositionFunctions/notifications').then(({ useNotification }) =&gt; {
      useNotification().add({
          title     : 'Block Deleted',
          message   : 'The block has been deleted',
          buttonText: 'Undo',
          buttonFunction () {
              undoDelete();
          }
      });
  });
  </code></pre>
  <p>Then it &quot;works&quot;, 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 &quot;editor&quot; entry point, it won't do anything.</p>
  <p>Vue Component JS</p>
  <pre><code>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) =&gt; {
              console.log(v);
          }
      }
  });
  </code></pre>
  <p>PLEASE, someone, tell me they can help? This is starting to do my head in...</p>
  <p>TIA</p>