Начинающий Vue.js: исправление изменения вычисляемого списка

Question

У меня список задач, разделенный на завершенный и завершенный

Выполненный:

<ul>
    <li v-for="task in tasks" v-if="task.completed">{{task.taskName}}</li>
</ul>

Выполненный:

 <ul>
    <li v-for="(task, index) in incompleteTasks">{{task.taskName}} - {{index}} 
    <button @click="doalert(index)" type="button">make complete</button>
    </li>
</ul>

Сценарий:

new Vue({
    el: "#root",
    data: {
        tasks: [
            {taskName: 'planning', completed: true},
            {taskName: 'designing', completed: false},
            {taskName: 'programming', completed: false},
            {taskName: 'testing', completed: false}
        ]
    },
    computed: {
        incompleteTasks(){
            return this.tasks.filter(task => ! task.completed);
        }
    },
    methods: {
        doalert(index){
            var incompleted_tasks = this.tasks.filter(task => ! task.completed);
            incompleted_tasks[index].completed = true;
        }
    }
});

Первый результат:

После нажатия кнопки программирования:

Как только я нажимаю кнопку программирования с индексом 1, она перемещается в завершенный список, но нажатие любой другой кнопки ничего не делает, как это исправить?И как получить индекс этого элемента в самом списке задач, а не только в незавершенных задачах?