diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index deeb88f0a..0d4744786 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import VueI18n from 'vue-i18n';
 import VueRouter from 'vue-router';
 import axios from 'axios';
+import bus from './mitt.js';
 // Global Components
 import hljs from 'highlight.js';
 import Multiselect from 'vue-multiselect';
@@ -93,7 +94,7 @@ commonHelpers();
 
 window.WootConstants = constants;
 window.axios = createAxios(axios);
-window.bus = new Vue();
+window.bus = bus;
 initializeChatwootEvents();
 initializeAnalyticsEvents();
 initalizeRouter();
diff --git a/app/javascript/packs/mitt.js b/app/javascript/packs/mitt.js
new file mode 100644
index 000000000..50402584e
--- /dev/null
+++ b/app/javascript/packs/mitt.js
@@ -0,0 +1,11 @@
+import mitt from 'mitt';
+
+const emitter = mitt();
+
+const bus = {
+  $on: emitter.on,
+  $off: emitter.off,
+  $emit: emitter.emit,
+};
+
+export default bus;
diff --git a/package.json b/package.json
index 2d51d6852..29904fd76 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
     "markdown-it": "^13.0.2",
     "markdown-it-link-attributes": "^4.0.1",
     "md5": "^2.3.0",
+    "mitt": "^3.0.1",
     "ninja-keys": "^1.2.2",
     "opus-recorder": "^8.0.5",
     "postcss": "^8.4.31",
diff --git a/yarn.lock b/yarn.lock
index 0aefd8413..384f3f68e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14920,6 +14920,11 @@ mississippi@^3.0.0:
     stream-each "^1.1.0"
     through2 "^2.0.0"
 
+mitt@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/mitt/-/mitt-3.0.1.tgz#ea36cf0cc30403601ae074c8f77b7092cdab36d1"
+  integrity sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==
+
 mixin-deep@^1.2.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"