diff --git a/platypush/backend/http/webapp/src/components/panels/Light/Index.vue b/platypush/backend/http/webapp/src/components/panels/Light/Index.vue
index 1621db8ddc..aaa9e9094c 100644
--- a/platypush/backend/http/webapp/src/components/panels/Light/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Light/Index.vue
@@ -31,7 +31,7 @@ export default {
   components: {Group, Groups},
   mixins: [Utils, Panel],
   emits: ['group-toggle', 'light-toggle', 'set-light', 'set-group', 'select-scene', 'start-animation', 'stop-animation',
-    'refresh'],
+    'refresh', 'light-changed'],
 
   props: {
     lights: {
@@ -182,13 +182,16 @@ export default {
         return
       }
 
-      delete event.plugin_name
-      delete event.type
+      const state = {...event}
+      const lightId = state.light_id
+      delete state.light_id
+      delete state.type
+      delete state.plugin_name
 
-      this.lights[event.light_id].state = {
-        ...(this.lights[event.light_id]?.state || {}),
-        ...event,
-      }
+      this.$emit('light-changed', {
+        id: lightId,
+        state: state,
+      })
     },
 
     onAnimationChange(event) {
@@ -209,7 +212,7 @@ export default {
     this.initSelectedGroup()
   },
 
-  destroyed() {
+  unmounted() {
     this.unsubscribe('on-light-change')
     this.unsubscribe('on-animation-change')
   },
diff --git a/platypush/backend/http/webapp/src/components/panels/LightHue/Index.vue b/platypush/backend/http/webapp/src/components/panels/LightHue/Index.vue
index abb7ad218c..7955d4d065 100644
--- a/platypush/backend/http/webapp/src/components/panels/LightHue/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/LightHue/Index.vue
@@ -2,7 +2,7 @@
   <Loading v-if="loading" />
   <LightPlugin plugin-name="light.hue" :config="config" :lights="lights" :groups="groups" :scenes="scenes"
                :animations="animations" :initial-group="initialGroup" :loading-groups="loadingGroups"
-               :color-converter="colorConverter" @group-toggle="toggleGroup"
+               :color-converter="colorConverter" @group-toggle="toggleGroup" @light-changed="onLightChanged"
                @light-toggle="toggleLight" @set-light="setLight" @set-group="setGroup" @select-scene="setScene"
                @start-animation="startAnimation" @stop-animation="stopAnimation" @refresh="refresh(true)"/>
 </template>
@@ -217,6 +217,13 @@ export default {
       await this.request('light.hue.stop_animation')
       await this.refresh(true)
     },
+
+    onLightChanged(event) {
+      this.lights[event.id].state = {
+        ...this.lights[event.id].state,
+        ...event.state,
+      }
+    },
   },
 
   mounted() {