diff --git a/website/client/app.vue b/website/client/app.vue
index e37c6a8abb..bfc58bc14d 100644
--- a/website/client/app.vue
+++ b/website/client/app.vue
@@ -364,6 +364,13 @@ export default {
       if (modalOnTop) this.$root.$emit('bv::show::modal', modalOnTop, {fromRoot: true});
     });
   },
+  beforeDestroy () {
+    this.$root.$off('playSound');
+    this.$root.$off('bv::modal::hidden');
+    this.$root.$off('bv::show::modal');
+    this.$root.$off('buyModal::showItem');
+    this.$root.$off('selectMembersModal::showItem');
+  },
   mounted () {
     // Remove the index.html loading screen and now show the inapp loading
     const loadingScreen = document.getElementById('loading-screen');
diff --git a/website/client/components/challenges/challengeModal.vue b/website/client/components/challenges/challengeModal.vue
index 1c36d526b7..bcfc54d958 100644
--- a/website/client/components/challenges/challengeModal.vue
+++ b/website/client/components/challenges/challengeModal.vue
@@ -242,7 +242,7 @@ export default {
       this.$root.$emit('bv::show::modal', 'challenge-modal');
     });
   },
-  destroyed () {
+  beforeDestroy () {
     this.$root.$off('habitica:clone-challenge');
   },
   watch: {
diff --git a/website/client/components/inventory/equipment/equipGearModal.vue b/website/client/components/inventory/equipment/equipGearModal.vue
index d54390f70a..fe4cacee14 100644
--- a/website/client/components/inventory/equipment/equipGearModal.vue
+++ b/website/client/components/inventory/equipment/equipGearModal.vue
@@ -31,8 +31,6 @@
         button.btn.btn-primary(@click="equipItem()") {{ $t(isEquipped ? 'unequip' : 'equip') }}
 
     div.clearfix(slot="modal-footer")
-
-
 </template>
 <style lang="scss">
 
diff --git a/website/client/components/inventory/stable/hatchedPetDialog.vue b/website/client/components/inventory/stable/hatchedPetDialog.vue
index 65365b87f0..17f210f4cb 100644
--- a/website/client/components/inventory/stable/hatchedPetDialog.vue
+++ b/website/client/components/inventory/stable/hatchedPetDialog.vue
@@ -19,9 +19,7 @@
     div.clearfix(slot="modal-footer")
 </template>
 
-
 <style lang="scss">
-
   @import '~client/assets/scss/colors.scss';
   @import '~client/assets/scss/modal.scss';
 
@@ -61,7 +59,6 @@
 
 </style>
 
-
 <script>
   import markdownDirective from 'client/directives/markdown';
 
@@ -73,9 +70,6 @@
     },
     directives: {
       markdown: markdownDirective,
-    },
-    created () {
-
     },
     mounted () {
       this.$root.$on('hatchedPet::open', this.openDialog);
diff --git a/website/client/components/notifications.vue b/website/client/components/notifications.vue
index 1a233f6c4d..d08d6b50b0 100644
--- a/website/client/components/notifications.vue
+++ b/website/client/components/notifications.vue
@@ -291,12 +291,18 @@ export default {
       this.runYesterDailies();
 
       // Do not remove the event listener as it's live for the entire app lifetime
-      document.addEventListener('mousemove', () => this.checkNextCron());
-      document.addEventListener('touchstart', () => this.checkNextCron());
-      document.addEventListener('mousedown', () => this.checkNextCron());
-      document.addEventListener('keydown', () => this.checkNextCron());
+      document.addEventListener('mousemove', this.checkNextCron);
+      document.addEventListener('touchstart', this.checkNextCron);
+      document.addEventListener('mousedown', this.checkNextCron);
+      document.addEventListener('keydown', this.checkNextCron);
     });
   },
+  beforeDestroy () {
+    document.removeEventListener('mousemove', this.checkNextCron);
+    document.removeEventListener('touchstart', this.checkNextCron);
+    document.removeEventListener('mousedown', this.checkNextCron);
+    document.removeEventListener('keydown', this.checkNextCron);
+  },
   methods: {
     checkUserAchievements () {
       if (this.user.needsCron) return;
diff --git a/website/client/components/shops/seasonal/index.vue b/website/client/components/shops/seasonal/index.vue
index 70c359ed7c..1c30460371 100644
--- a/website/client/components/shops/seasonal/index.vue
+++ b/website/client/components/shops/seasonal/index.vue
@@ -503,5 +503,8 @@
         this.backgroundUpdate = new Date();
       });
     },
+    beforeDestroy () {
+      this.$root.$off('buyModal::boughtItem');
+    },
   };
 </script>
diff --git a/website/client/components/shops/timeTravelers/index.vue b/website/client/components/shops/timeTravelers/index.vue
index 327c3cd0cb..e3ff050662 100644
--- a/website/client/components/shops/timeTravelers/index.vue
+++ b/website/client/components/shops/timeTravelers/index.vue
@@ -388,5 +388,8 @@
         this.backgroundUpdate = new Date();
       });
     },
+    beforeDestroy () {
+      this.$root.$off('buyModal::boughtItem');
+    },
   };
 </script>
diff --git a/website/client/components/snackbars/notification.vue b/website/client/components/snackbars/notification.vue
index ed3d59e137..de2fa3ee73 100644
--- a/website/client/components/snackbars/notification.vue
+++ b/website/client/components/snackbars/notification.vue
@@ -135,11 +135,14 @@ export default {
     if (timeout) {
       let delay = this.notification.delay || 1500;
       delay += this.$store.state.notificationStore.length * 1000;
-      setTimeout(() => {
+      this.timer = setTimeout(() => {
         this.show = false;
       }, delay);
     }
   },
+  beforeDestroy () {
+    clearTimeout(this.timer);
+  },
   watch: {
     show () {
       this.$store.dispatch('snackbars:remove', this.notification);
diff --git a/website/client/components/tasks/brokenTaskModal.vue b/website/client/components/tasks/brokenTaskModal.vue
index ddd983b46d..be37bbbefc 100644
--- a/website/client/components/tasks/brokenTaskModal.vue
+++ b/website/client/components/tasks/brokenTaskModal.vue
@@ -48,8 +48,8 @@ export default {
       this.$root.$emit('bv::show::modal', 'broken-task-modal');
     });
   },
-  removed () {
-    this.$root.$remove('handle-broken-task');
+  beforeDestroy () {
+    this.$root.$off('handle-broken-task');
   },
   methods: {
     ...mapActions({
diff --git a/website/client/components/tasks/spells.vue b/website/client/components/tasks/spells.vue
index 3f8c620c48..d6bf2a54bd 100644
--- a/website/client/components/tasks/spells.vue
+++ b/website/client/components/tasks/spells.vue
@@ -192,10 +192,7 @@ export default {
       this.castEnd(target, type, $event);
     });
 
-    document.addEventListener('keyup', keyEvent => {
-      if (keyEvent.keyCode !== 27) return;
-      this.castCancel();
-    });
+    document.addEventListener('keyup', this.handleKeyUp);
 
     // @TODO: should we abstract the drawer state/local store to a library and mixing combo? We use a similar pattern in equipment
     const spellDrawerState = getLocalSetting(CONSTANTS.keyConstants.SPELL_DRAWER_STATE);
@@ -203,6 +200,10 @@ export default {
       this.$store.state.spellOptions.spellDrawOpen = false;
     }
   },
+  beforeDestroy () {
+    this.$root.$off('castEnd');
+    document.removeEventListener('keyup', this.handleKeyUp);
+  },
   computed: {
     ...mapState({user: 'user.data'}),
     openStatus () {
@@ -210,6 +211,10 @@ export default {
     },
   },
   methods: {
+    handleKeyUp (keyEvent) {
+      if (keyEvent.keyCode !== 27) return;
+      this.castCancel();
+    },
     drawerToggled (newState) {
       this.$store.state.spellOptions.spellDrawOpen = newState;
 
diff --git a/website/client/components/ui/itemRows.vue b/website/client/components/ui/itemRows.vue
index 60cf9addf4..9790a2df6b 100644
--- a/website/client/components/ui/itemRows.vue
+++ b/website/client/components/ui/itemRows.vue
@@ -16,7 +16,6 @@
     ) {{ showAll ? $t('showLess') : $t('showMore') }}
 
     div.fill-height(v-else)
-
 </template>
 
 <style lang="scss" scoped>