Tengo un proyecto Vue.js en el que intento eliminar un objeto de la matriz de elementos haciendo clic en el botón Eliminar en el archivo CheckList.vue, pero recibo el siguiente error: la propiedad o el método "eliminar" no está definido en la instancia pero referenciado durante el render. Asegúrese de que esta propiedad sea reactiva, ya sea en la opción de datos o para componentes basados en clases, inicializando la propiedad. ¿Alguien puede ayudar?

Ejemplo.vue

 <template> <div> <input type="text" v-model="message" @keyup.enter="add"> <button @click="add">Add Item</button> <CheckList :items="items" all="all" title="All Items"></CheckList> <!-- v-bind --> <CheckList :items="doneItems" title="Done Items"></CheckList> <CheckList :items="notDoneItems" title="Not Done Items"></CheckList> </div> </template> <script> import CheckList from "./CheckList"; export default { name: "Example", components: {CheckList}, data() { return { message: '', items: [ {name:'Apple', done: true, key: 0}, {name:'Orange', done: false, key: 1}, {name:'Grapes', done: true, key: 2}, ], } }, methods: { add(){ if(this.message !== '') { this.items.push({ name: this.message, done: false, key: this.items.length }); this.message = ''; } }, remove(index){ this.events.splice(index, 1); } }, computed: { doneItems(){ return this.items.filter(item => item.done); }, notDoneItems(){ return this.items.filter(item => !item.done); } } } </script> <style scoped> </style>

CheckList.vue

 <template> <div> <h3>{{ title }}</h3> <ul> <li v-for="(item,key) in items" :key="item.key"> <input type="checkbox" v-model="item.done"> {{item.name}} <button v-if="all" v-on:click="remove(key)" class="button1">remove</button> </li> </ul> </div> </template> <script> export default { name: "CheckList", props: ['items', 'title', 'all'] } </script> <style scoped> .button1{ margin-left:10px; } </style>