Hay dos problemas. El primer problema es que tiene su v-model v establecido en v-model="filter.filterCollection" , por lo que una casilla de verificación que seleccione se almacenará en la matriz como una cadena y si selecciona otra casilla de verificación, la cadena se sobrescribe. El segundo problema es que llamas a esa cadena almacenada como una matriz. Eso hace que su cadena, que es una matriz de letras, se represente para cada letra. Entonces 'Número' es como ["N", "u", "m", "b", "e", "r"] .

Para resolver su problema, debe almacenar cada selección con su propia referencia en su v-model . Para cubrir sus necesidades de listado correcto y eliminación correcta, debe aplicar los siguientes cambios:

Tu casilla de verificación

 <Checkbox v-for="(item, index) in items" :key="item.id" :label="item.name" :id="index" :isChecked="isChecked(index)" // this is new @remove-selected-filter="removeSelectedFilter" // This is new :modelValue="item.name" v-model="filter.filterCollection[index]" // Change this />

tu v-modelo

 filter: { filterCollection: {} // Object instead of array }

Métodos en FilterPopUp.vue

 methods: { removeSelectedFilter(index) { delete this.filter.filterCollection[index]; }, isChecked(index) { return !!this.filter.filterCollection[index]; } }

Su Checkbox.vue:

 <template> <label> <p>{{ label }}</p> <input type="checkbox" :id="id" :value="modelValue" :checked="isChecked" @change="emitUncheck($event.target.checked)" @input="$emit('update:modelValue', $event.target.value)" /> <span class="checkmark"></span> </label> </template> <script> export default { name: "Checkbox", props: { modelValue: { type: String, default: "" }, isChecked: Boolean, label: { type: String }, value: { type: Array }, id: { type: Number }, }, methods: { emitUncheck(event) { if(!event){ this.$emit('remove-selected-filter', this.id); } } } }; </script>

Esto ahora debería mostrar sus elementos correctamente, eliminar los elementos correctamente y anular la selección de las casillas de verificación después de eliminar los elementos.

StevenSiebert ha señalado correctamente sus errores.

Pero su solución no es completa, ya que los filtros no se eliminarán de la colección al desmarcar uno de ellos.

Aquí está mi solución completa de su casilla de verificación que funciona como se esperaba:

Casilla de verificación.vue

 <template> <label> <p>{{ label }}</p> <input type="checkbox" :id="id" v-model="checked" @change="$emit('change', { id: this.id, checked: this.checked})" /> <span class="checkmark"></span> </label> </template> <script> export default { name: "Checkbox", props: { modelValue: { type: Boolean, default: false }, label: { type: String }, id: { type: Number }, }, emits: ["change"], data() { return { checked: this.modelValue }; } }; </script>

FilterPopUp.vue

 <template> ... <Checkbox v-for="(item, index) in items" :key="index" :label="item.name" :id="index" @change="onChange" /> ... </template> <script> ... methods: { removeSelectedFilter(index) { this.filter.filterCollection.splice(index, 1); }, onChange(args) { const {id, checked} = args; const item = this.items[id].name; if (checked) { if (this.filter.filterCollection.indexOf(item) < 0) { this.filter.filterCollection.push(item); } } else { this.filter.filterCollection = this.filter.filterCollection.filter( i=> i != item); } }, }, ...

Aquí está el CodeSandbox de trabajo:

https://codesandbox.io/s/pensive-shadow-ygvzb?file=/src/components/Checkbox.vue

Claro, hay muchas maneras de hacerlo. Si alguien tiene una forma mejor y más corta de hacerlo, publique su solución. Será interesante mirarlo.