With Vue.js, I'm showing the list of items with a checkbox. Clicking on Checkbox will move the item down with strike-through. The issue is, when I click on the checkbox, the wrong checkbox is checked. 

For eg, when I click on Apple checkbox, orange checkbox is checked.

Fiddle: <https://jsfiddle.net/d6encxe1/>

Here's my code,

```js
var myApp = new Vue({
  el: '#myApp',
  data: {
    lists: [
      {title: 'Apple', isChecked: false},
      {title: 'Orange', isChecked: false},
      {title: 'Grapes', isChecked: false}
    ]
  },
  computed: {
    filterLists: function(){
      return _.orderBy(this.lists, ['isChecked', false]);
    }
  },
  methods: {
    completeTask: function(e, i){
      e.preventDefault();
      this.lists[i].isChecked = !this.lists[i].isChecked;
    }
  }
})
```

```css
.completed{
  text-decoration: line-through;
  color: red;
}
```

```html
<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>

<div id="myApp">
  <ul>
      <li v-for="(list, index) in filterLists">
        <input type="checkbox" v-bind:id="'todo-' + index" v-on:change="completeTask($event, index)" />
        <span class="title" v-bind:class="{completed: list.isChecked}">{{list.title}}</span> 
        </li>

    </ul>
 </div>
```