Прежде чем реализовывать удаление, дадим пользователю возможность пометить задачу выполненной. Добавим в компонент задачи поддержку директивы v-model. Меняем имя параметра с task на value (или настраиваем
model, если надо задать какое-то иное имя), а сам объект задачи заворачиваем в Proxy, который будет перехватывать установку значений свойств, собирать новый объект и отправлять его в родительский компонент:
computed: {
task() {
return new Proxy(this.value, {
set: (target, prop, value) => {
this.$emit('input', { ...target, [prop]: value });
return true;
},
});
},
},
И привязываем свойство done к чекбоксу (если кроме done надо редактировать ещё какие-то свойства - нет проблем, точно так же указываем их в
v-model соответствующих полей ввода):
<input type="checkbox" v-model="task.done">
Теперь собственно удаление. В компоненте задачи добавляем кнопку, по клику на которую эмитим событие:
<button v-if="task.done" @click="$emit('delete')">delete</button>
В родительском компоненте подписываемся на это событие и удаляем задачу из массива:
<task-element
v-for="(n, i) in todos"
v-model="todos[i]"
@delete="todos.splice(i, 1)"
></task-element>
https://jsfiddle.net/8g45pcx1/ 
