diff --git a/frontend/src/features/sla/SlaBadge.vue b/frontend/src/features/sla/SlaBadge.vue
index ec1e23a5..b462990b 100644
--- a/frontend/src/features/sla/SlaBadge.vue
+++ b/frontend/src/features/sla/SlaBadge.vue
@@ -32,7 +32,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { useSla } from '@/composables/useSla'
 import { AlertCircle, CheckCircle, Clock } from 'lucide-vue-next'
 const props = defineProps({
@@ -45,10 +45,21 @@ const props = defineProps({
   }
 })
 
+const emit = defineEmits(['status'])
+
 let sla = null
 if (props.dueAt) {
   sla = useSla(ref(props.dueAt), ref(props.actualAt))
 }
+
+// Watch for status change and emit
+watch(
+  sla,
+  (newVal) => {
+    if (newVal?.status) emit('status', newVal.status)
+  },
+  { immediate: true }
+)
 </script>
 
 <style scoped>