Why checkbox automatically checked the next checkbox when checked

Question

I'm making a small todolist app using vue. The problem is the next task's checkbox is automatically checked when I click the first checkbox to mark as complete task but it does not happen when I click the last checkbox.

I've tried this on my machine but didn't work. https://jsfiddle.net/razvantirboaca/9aqsjj30/

<div id="app">
  <h1>Incomplete Tasks</h1>
    <ul>
         <li v-for="task in incompleteTasks">
            <label> 
               <input type="checkbox" v-model="task.completed">
               {{ task.description }}
            </label> 
         </li>
    </ul>
   <h1>Complete Tasks</h1>
    <ul>
         <li v-for="task in completeTasks">
            <label> 
               <input type="checkbox" v-model="task.completed">
               {{ task.description }}
            </label> 
         </li>
    </ul>

new Vue({
    el: '#app',

    data: {
        tasks: [
            { description: 'First Task', completed: false },
            { description: 'Second Task', completed: false },
            { description: 'Third Task', completed: false },
            { description: 'Fourth Task', completed: false }
        ]
    },

    computed: {
        incompleteTasks() {
            return this.tasks.filter(task => !task.completed);
        },

        completeTasks() {
            return this.tasks.filter(task => task.completed);
        }
    }
})

Answer 1

Add a key to v-for elements. If there is a unique id you can use that, but since I don't see it in the current data, I have used description as an example

<li v-for="task in incompleteTasks" :key="task.description">

<li v-for="task in completeTasks" :key="task.description">