diff --git a/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions.vue b/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions.vue
index 385717e7c1e641b08a86e24a08bb95145e880e6e..3e8cc7a6630ea257ef9cebcd606b2d8c2f88bed6 100644
--- a/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions.vue
+++ b/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions.vue
@@ -1,5 +1,6 @@
 <script>
 import Store from '../../stores/sidebar_store';
+import eventHub from '../../event_hub';
 import Flash from '../../../flash';
 import { __ } from '../../../locale';
 import subscriptions from './subscriptions.vue';
@@ -19,6 +20,12 @@ export default {
       store: new Store(),
     };
   },
+  created() {
+    eventHub.$on('toggleSubscription', this.onToggleSubscription);
+  },
+  beforeDestroy() {
+    eventHub.$off('toggleSubscription', this.onToggleSubscription);
+  },
   methods: {
     onToggleSubscription() {
       this.mediator.toggleSubscription()
@@ -35,7 +42,6 @@ export default {
     <subscriptions
       :loading="store.isFetching.subscriptions"
       :subscribed="store.subscribed"
-      @toggleSubscription="onToggleSubscription"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
index 486aff8a938dff17c11b5002e70e10f246e592cc..d69d100a26c104e12300431f0c20563f788dde85 100644
--- a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
+++ b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
@@ -3,6 +3,7 @@
   import icon from '~/vue_shared/components/icon.vue';
   import toggleButton from '~/vue_shared/components/toggle_button.vue';
   import tooltip from '~/vue_shared/directives/tooltip';
+  import eventHub from '../../event_hub';
 
   const ICON_ON = 'notifications';
   const ICON_OFF = 'notifications-off';
@@ -47,7 +48,7 @@
     },
     methods: {
       toggleSubscription() {
-        this.$emit('toggleSubscription', this.id);
+        eventHub.$emit('toggleSubscription', this.id);
       },
     },
   };
diff --git a/spec/javascripts/sidebar/sidebar_subscriptions_spec.js b/spec/javascripts/sidebar/sidebar_subscriptions_spec.js
index 9e4370842241de020022f7efea92cf561f0306d9..56a2543660bbbb31a0993e72ab6a9b1db653398d 100644
--- a/spec/javascripts/sidebar/sidebar_subscriptions_spec.js
+++ b/spec/javascripts/sidebar/sidebar_subscriptions_spec.js
@@ -3,6 +3,7 @@ import sidebarSubscriptions from '~/sidebar/components/subscriptions/sidebar_sub
 import SidebarMediator from '~/sidebar/sidebar_mediator';
 import SidebarService from '~/sidebar/services/sidebar_service';
 import SidebarStore from '~/sidebar/stores/sidebar_store';
+import eventHub from '~/sidebar/event_hub';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
 import Mock from './mock_data';
 
@@ -31,7 +32,7 @@ describe('Sidebar Subscriptions', function () {
       mediator,
     });
 
-    vm.onToggleSubscription();
+    eventHub.$emit('toggleSubscription');
 
     expect(mediator.toggleSubscription).toHaveBeenCalled();
   });
diff --git a/spec/javascripts/sidebar/subscriptions_spec.js b/spec/javascripts/sidebar/subscriptions_spec.js
index 11ff126dfb503e3656537362f0183b05d5842bb2..aee8f0acbb9d4f71ff10aac171a131b0a17375ce 100644
--- a/spec/javascripts/sidebar/subscriptions_spec.js
+++ b/spec/javascripts/sidebar/subscriptions_spec.js
@@ -39,12 +39,4 @@ describe('Subscriptions', function () {
 
     expect(vm.$refs.toggleButton.$el.querySelector('.project-feature-toggle')).toHaveClass('is-checked');
   });
-
-  it('toggleSubscription method emits `toggleSubscription` event on component', () => {
-    vm = mountComponent(Subscriptions, { subscribed: true });
-    spyOn(vm, '$emit');
-
-    vm.toggleSubscription();
-    expect(vm.$emit).toHaveBeenCalledWith('toggleSubscription', jasmine.any(Object));
-  });
 });