Vue3 v-for using pinia computed property not updating correctly

I have a component that fetches employees from a pinia store, and a filter component to filter employees by office.

When I inspect the data in Vue devtools, both selectedOffices and filteredEmployeeList looks as expected. But the list rendered in the component (filteredEmployeeList) doesn't match the data displayed in devtools.

Any ideas?

Component

<template>
<div class="employees">
  <EmployeeCard
    v-for="(employee, idx) in filteredEmployeeList"
    :key="idx"
    :employee-data="employee"
  />
</div>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import EmployeeFilter from '@/components/EmployeeFilter.vue';
import EmployeeCard from '@/components/EmployeeCard.vue';

import { useEmployeesStore } from '@/stores/employees';
const employeesStore = useEmployeesStore();
const { filteredEmployeeList } = storeToRefs(employeesStore);

</script>

Filter component

<div class="filter-wrapper">
      <div 
        v-for="(office, idx) in employeesStore.offices" 
        class="office-filter"
      >
        <label :for="idx">
          <input 
            v-model="employeesStore.selectedOffices"
            :value="office"
            class="checkbox"
            type="checkbox"
          >
            {{ office }}
        </label>
      </div>
</div>

Store

const selectedOffices = ref([]);

const selectedFiltersLength = computed(() => {
    return selectedOffices.value.length;
  });

const filteredEmployeeList = computed(() => {
   // No filters selected, return all employees 
   if (selectedFiltersLength.value == 0) {
      return employees.value;
    }

    return employees.value.filter(employee => selectedOffices.value.includes(employee.office));
  });

Screenshot

Thanks, found the problem. It was as you said, problem with the :key attribute. Changed to employee.id and it works like a charm.