diff --git a/package-lock.json b/package-lock.json
index 5a06c1d..07b59a8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@theace0296/vue-snotify",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@theace0296/vue-snotify",
-      "version": "4.0.3",
+      "version": "4.0.4",
       "license": "MIT",
       "dependencies": {
         "mitt": "^3.0.0",
diff --git a/package.json b/package.json
index e726ef8..3c17b7f 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Snotify.vue b/src/components/Snotify.vue
index 49a5a28..945457f 100644
--- a/src/components/Snotify.vue
+++ b/src/components/Snotify.vue
@@ -21,7 +21,7 @@
     </div>
   </div>
 </template>
-&
+
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { SnotifyToast } from './toast.model';
diff --git a/src/components/SnotifyToast.vue b/src/components/SnotifyToast.vue
index 8b2a34e..a898036 100644
--- a/src/components/SnotifyToast.vue
+++ b/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');