diff --git a/components/MainSection.vue b/components/MainSection.vue
index dd49620..f541730 100644
--- a/components/MainSection.vue
+++ b/components/MainSection.vue
@@ -856,10 +856,24 @@ export default {
     },
   },
   components: {
-    TaskForm: () => import("@task/components/TaskForm"),
-    HoursForm: () => import("@task/components/HoursForm"),
+    TaskForm: defineAsyncComponent(() =>
+      import("@task/components/TaskForm")
+    ),
+    HoursForm: defineAsyncComponent(() =>
+      import("@task/components/HoursForm")
+    ),
+    Multiselect: defineAsyncComponent(() =>
+      import("vue-multiselect")
+    ),
 
-    Multiselect: () => import("vue-multiselect"),
+
+
+
+
+    // TaskForm: () => import("@task/components/TaskForm"),
+    // HoursForm: () => import("@task/components/HoursForm"),
+
+    // Multiselect: () => import("vue-multiselect"),
     // datePicker: VuePersianDatetimePicker,
   },
 };
diff --git a/components/RightSection.vue b/components/RightSection.vue
index 23a932c..9945d58 100644
--- a/components/RightSection.vue
+++ b/components/RightSection.vue
@@ -192,10 +192,11 @@ export default {
   beforeMount() {
     // this.httpService = new HttpService(this.taskMicroServiceName);
     this.httpService = useNuxtApp()["$http"];
+    const { $eventBus } = useNuxtApp();
 
     this.activeUserId = this.currentUser.user_id;
     // event fired from MainSection.vue.
-    this.$root.$on("request-based-on-new-user-data", (userId) => {
+    $eventBus.on("request-based-on-new-user-data", (userId) => {
       this.activeUserId = userId;
       this.getWorkingHoursInformation();
     });