Removed duplicate component, worked on receiving notifications from server

src/components/Game.vue

@@ -1,5 +1,4 @@
 <template>
-  <Notifications />
   <div class="game-container">
     <div class="top-ui">
       <Hud />

src/components/utilities/Notifications.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="notifications">
-    <Modal v-for="notification in notifications.getNotifications" :key="notification.id" :isModalOpen="true" @modal:close="closeNotification(notification.id)">
+    <Modal v-for="notification in notifications.getNotifications" :key="notification.id" :isModalOpen="true"
+           @modal:close="closeNotification(notification.id)">
       <template #modal-body>
-          <p>{{ notification.message }}</p>
+        <p>{{ notification.message }}</p>
       </template>
     </Modal>
   </div>
@@ -12,17 +13,32 @@
 import { useNotificationStore } from '@/stores/notifications'
 import { useSocketStore } from '@/stores/socket'
 import Modal from '@/components/utilities/Modal.vue'
+import { onMounted, watch } from 'vue'
 
-const notifications = useNotificationStore();
+const notifications = useNotificationStore()
-const socket = useSocketStore();
+const socket = useSocketStore()
-
-if (socket.getConnection) {
-  socket.getConnection.on('notification', (data: any) => {
-    notifications.addNotification(data);
-  });
-}
 
 function closeNotification(id: string) {
-  notifications.removeNotification(id);
+  notifications.removeNotification(id)
 }
+
+function setupNotificationListener(connection: any) {
+  connection.on('notification', (data: { message: string }) => {
+    console.log(data)
+    notifications.addNotification(data)
+  })
+}
+
+onMounted(() => {
+  const connection = socket.getConnection
+  if (connection) {
+    setupNotificationListener(connection)
+  } else {
+    // Watch for changes in the socket connection
+    watch(() => socket.getConnection, (newConnection) => {
+        if (newConnection) setupNotificationListener(newConnection)
+      }
+    )
+  }
+})
 </script>