filter

src/components/StatusFilter.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useStatusStore } from '@/stores/status.ts'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
 interface Props {
   status?: string | null
@@ -11,28 +11,25 @@ const emit = defineEmits<{ changed: [value: string] }>()
 const statusStore = useStatusStore()
 const selected = ref(status)
 const onUpdate = (val: unknown) => emit('changed', val as string)
+watch(
+  () => status,
+  (val) => {
+    selected.value = val
+  },
+)
 </script>
 
 <template>
   <v-btn-toggle
     v-model="selected"
-    class="border-opacity-25"
-    border
     divided
     size="default"
     density="compact"
     variant="text"
     @update:model-value="onUpdate"
   >
-    <v-btn
-      slim
-      v-for="status in statusStore.statuses"
-      :color="status.color"
-      :value="status.alias"
-      :key="status.alias"
-      rounded="0"
-    >
-      <div class="text-default">{{ status.name }}</div>
+    <v-btn slim v-for="el in statusStore.statuses" :color="el.color" :value="el.alias" :key="el.alias" rounded="0">
+      <div class="text-default">{{ el.name }}</div>
     </v-btn>
   </v-btn-toggle>
 </template>