dupreseraphine

const status = defineModel('status');
const statuses = [ 'all', 'alive', 'dead', 'unknown' ];

<select v-model="status">
  <option v-for="n in statuses">{{ n }}</option>
</select>

defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});

<div v-for="n in data">
  <span :class="[ 'status', n.status ]"></span>
  ...
</div>

.status {
  border-radius: 50%;
  width: 30px;
  height: 30px;

  &.alive { background: green; }
  &.dead { background: red; }
  &.unknown { background: orange; }
}

const data = ref([ ... ]);
const status = ref('all');
const filteredData = computed(() => status.value === 'all'
  ? data.value
  : data.value.filter(n => n.status === status.value)
);

<FilterBlock v-model:status="status" />
<CardList :data="filteredData" />