Apply changes from artemsky#85

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theace0296/vue-snotify",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "description": "A Vue.js toast notifications",
   "scripts": {
     "dev": "vite -c vite.config.ts",

src/components/Snotify.vue

@@ -21,7 +21,7 @@
     </div>
   </div>
 </template>
-&
+
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { SnotifyToast } from './toast.model';

src/components/SnotifyToast.vue

@@ -127,17 +127,8 @@ export default defineComponent({
     };
   },
   created() {
-    this.$snotify.emitter.on('toastChanged', (toast) => {
-      if (this.toast.id === toast?.id) {
-        this.$forceUpdate();
-        this.initToast();
-      }
-    });
-    this.$snotify.emitter.on('remove', (id) => {
-      if (this.toast.id === id) {
-        this.onRemove();
-      }
-    });
+    this.$snotify.emitter.on('toastChanged', this.onChanged);
+    this.$snotify.emitter.on('remove', this.onRemove);
   },
   mounted() {
     this.$nextTick(() => {
@@ -153,6 +144,8 @@ export default defineComponent({
     });
   },
   unmounted() {
+    this.$snotify.emitter.off('toastChanged', this.onChanged);
+    this.$snotify.emitter.off('remove', this.onRemove);
     cancelAnimationFrame(this.animationFrame ?? -1);
     this.toast.eventEmitter.emit('destroyed');
   },
@@ -223,10 +216,22 @@ export default defineComponent({
       };
       calculate();
     },
+    /**
+     * Trigger onChanged, updates toast
+     */
+    onChanged(toast: SnotifyToast) {
+      if (this.toast.id === toast?.id) {
+        this.$forceUpdate();
+        this.initToast();
+      }
+    },
     /**
      * Trigger beforeDestroy lifecycle. Removes toast
      */
-    onRemove() {
+    onRemove(id: string | number) {
+      if (this.toast.id !== id) {
+        return;
+      }
       this.state.isDestroying = true;
       this.$emit('state-changed', 'beforeHide');
       this.toast.eventEmitter.emit('beforeHide');