VueJS code - wrong behavor - whats wrong?

I have this code in VueJs , simple task list, completed and incompleted ones, when I check or uncheck the box the task should move to the proper list.

var app = new Vue({
  el: '#vueapp',
  data: {
    tasks: [{
        id: 1,
        description: 'Do some Stuff',
        completed: false
      },
      {
        id: 2,
        description: 'Go to pharmacy',
        completed: false
      },
      {
        id: 3,
        description: 'Go to doctor',
        completed: true
      },
      {
        id: 4,
        description: 'Do some Slask',
        completed: false
      },
    ]
  },
  methods: {
    toggleTask(key) {
      this.tasks[key].completed = !this.tasks[key].completed;
    }
  },
  computed: {
    incompleteTasks() {
      return this.tasks.filter(task => !task.completed);
    },
    completedTasks() {
      return this.tasks.filter(task => task.completed);
    },
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="vueapp">
  <h2>Completed Tasks</h2>
  <ul>
    <li v-for="(task, key) in completedTasks">{{ task.description }}<input type="checkbox" v-model="task.completed"></li>
  </ul>

  <h2>Incomplete Tasks</h2>
  <ul>
    <li v-for="(task, key) in incompleteTasks">{{ task.description }}<input type="checkbox" v-model="task.completed"></li>
  </ul>
</div>

tested in Chrome. Try check the first incomplete task , it moves on the upper list succesfully, but the next incomplete task gets checked too.!!!!

Solution

You need to add a key to your loops :key="task.id".

To give Vue a hint so that it can track each node’s identity, and thus reuse and reorder existing elements, you need to provide a unique key attribute for each item. An ideal value for key would be the unique id of each item.

var app = new Vue({
  el: '#vueapp',
  data: {
    tasks: [{
        id: 1,
        description: 'Do some Stuff',
        completed: false
      },
      {
        id: 2,
        description: 'Go to pharmacy',
        completed: false
      },
      {
        id: 3,
        description: 'Go to doctor',
        completed: true
      },
      {
        id: 4,
        description: 'Do some Slask',
        completed: false
      },
    ]
  },
  methods: {
    toggleTask(key) {
      this.tasks[key].completed = !this.tasks[key].completed;
    }
  },
  computed: {
    incompleteTasks() {
      return this.tasks.filter(task => !task.completed);
    },
    completedTasks() {
      return this.tasks.filter(task => task.completed);
    },
  }
});

.as-console-wrapper { display: none !important; }

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="vueapp">
  <h2>Completed Tasks</h2>
  <ul>
    <li v-for="(task, key) in completedTasks" :key="task.id">{{ task.description }}<input type="checkbox" v-model="task.completed"></li>
  </ul>

  <h2>Incomplete Tasks</h2>
  <ul>
    <li v-for="(task, key) in incompleteTasks" :key="task.id">{{ task.description }}<input type="checkbox" v-model="task.completed"></li>
  </ul>
</div>