<template>
  <v-chip-group v-model="local" mandatory @update:model-value="onChange">
    <v-chip value="all">All</v-chip>
    <v-chip value="running">Running</v-chip>
    <v-chip value="error">Failed</v-chip>
    <v-chip value="quarantined">Quarantined</v-chip>
  </v-chip-group>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({ modelValue: { type: String, default: 'all' } })
const emit = defineEmits(['update:modelValue'])

const local = ref(props.modelValue)
watch(() => props.modelValue, (v) => { local.value = v })

function onChange(v) {
  if (v !== props.modelValue) emit('update:modelValue', v)
}
</script>
