Vue 3 Toast notifications using Pinia and DaisyUI

Header.vue

<script setup lang="ts">
  import { storeToRefs } from 'pinia';
  const notifyStore = useNotifyStore();
  const { notifications } = storeToRefs(notifyStore);
</script>

<template>
  ....
    <div class="toast toast-end toast-top">
      <div v-for="notification in notifications" :class="notification.type">
        <div>
          <button 
            @click.prevent="notifyStore.removeNotification(notification)"
            type="button" 
            class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" 
            aria-label="Close">
            <span class="sr-only">Close</span>
            <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </button>
          <span>&nbsp;{{notification.message}}</span>
        </div>
      </div>
    </div>
    .....
  </template>

notify.store.ts

import { defineStore } from "pinia"

/*
This store manages User and Account state including the ActiveAccount
It is used in the Account administration page and the header due to it's account switching features.
*/
export interface Notification{
  message: string;
  type: NotificationType;
  notifyTime: number;
}

export enum NotificationType{
  Info = "alert alert-info",
  Success = "alert alert-success",
  Warning = "alert alert-warning",
  Error = "alert alert-error",
}

interface State {
  notifications: Notification[],
  notificationsArchive: Notification[],
}

export const useNotifyStore = defineStore('notify', {
  state: (): State => {
    return {
      notifications: [],
      notificationsArchive: [],
    }
  },
  actions: {
    notify(messageOrError: unknown, type:NotificationType){
      let message: string = "";
      if (messageOrError instanceof Error) message = messageOrError.message;
      if (typeof messageOrError === "string") message = messageOrError;
      const notification: Notification = {message, type, notifyTime: Date.now()}; 
      this.notifications.push(notification);
      setTimeout(this.removeNotification.bind(this), 5000, notification);
    },
    removeNotification(notification: Notification){
      this.notifications = this.notifications.filter(n => n.notifyTime != notification.notifyTime);
    },
  }
});

SomePage.vue

<script setup lang="ts">
  const notifyStore = useNotifyStore();
  try {
    ..do something usefull
    notifyStore.notify("it worked!", NotificationType.Success);
  } catch (error) {
    notifyStore.notify(error, NotificationType.Error);
  }
 </script>