Checkbox incorrectly checked when sorting a list by a checkbox-controlled value

In my app I’m sorting a list of items by a “favorite” checkbox on each item, so that favorited items always move to the top. I made a computed property for the list, and used JavaScript’s native sort() method and a compareBy function to return the sorted results. The sort works and when I check or uncheck a checkbox, the changed item moves to the correct location in the list. However, the item that is now in the spot where the previous item was also gets checked, but does not move. It looks like a display-only issue, as the model value is correct, but the checkbox is not.


data: {
    list: [
         { name: "Item 1", favorite: false},
         { name: "Item 2", favorite: false},
         { name: "Item 3", favorite: false}
computed: {
    sortedList: function() {
        return this.list.slice().sort((a,b) => b.favorite - a.favorite);


<div v-for="item in sortedList"> 
   <label><input type="checkbox" v-model="item.favorite" /> {{}}</label>

I was able to replicate with the VueJs boilerplate to-do list example on JsFiddle:

Is this a bug, or am I doing something wrong in how I’m creating the computed property or the list?

Add an id atttribute to each item in your todos and use :key

<li v-for="todo in sortedTodos" :key="">

That solved it. Thanks for your help