Use a $watch-based system to register subscribe handlers when the events component is not yet ready instead of relying on setTimeout hacks

platypush/backend/http/webapp/src/Events.vue

@@ -17,6 +17,7 @@ export default {
   data() {
     return {
       ws: null,
+      initialized: false,
       pending: false,
       opened: false,
       timeout: null,
@@ -125,6 +126,7 @@ export default {
       this.ws.onopen = this.onOpen
       this.ws.onerror = this.onError
       this.ws.onclose = this.onClose
+      this.initialized = true
     },
 
     subscribe(msg) {

platypush/backend/http/webapp/src/components/VoiceAssistant.vue

@@ -118,7 +118,7 @@ export default {
   },
 
   mounted() {
-    setTimeout(this.registerHandlers, 10000)
+    this.registerHandlers()
   },
 }
 </script>

platypush/backend/http/webapp/src/utils/Events.vue

@@ -3,12 +3,33 @@ import { bus } from "@/bus";
 
 export default {
   name: "Events",
+  computed: {
+    _eventsReady() {
+      return this.$root.$refs.events?.initialized
+    },
+  },
+
   methods: {
     subscribe(handler, ...events) {
+      const subFunc = () => {
         bus.emit('subscribe', {
           events: events,
           handler: handler,
         })
+      }
+
+      if (this._eventsReady) {
+        subFunc()
+        return
+      }
+
+      const self = this
+      const unwatch = this.$watch( () => self._eventsReady, (newVal) => {
+        if (newVal) {
+          subFunc()
+          unwatch()
+        }
+      })
     },
   }
 }