Как получить индекс элемента массива? (Vue JS)

var app = new Vue({
  el: '#app',
  data() {
    return {
      name: "",
      count: 0,
      select: null,
      list: [{
          id: 1,
          body: 'Покушать'
        },
        {
          id: 2,
          body: 'Сходить в магазин'
        }
      ]
    }
  },
  methods: {
    on(i) {
      if (this.select === i) i = null
      this.select = i
    },
    del() {
      if (this.select == null) return
      this.list.splice(this.select, 1)
      this.select = null
    },
    create() {
      const newList = {
        id: Date.now(),
        body: this.name
      }
      this.list.push(newList);
      this.name = ''
    }
  }
})

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.todolist {
  margin: 15px;
  padding: 10px;
  border: 2px solid orangered;
}
.todolist .on{
  border: 1px solid green;
}

.input {
  border: 3px solid rgb(235, 165, 104);
  margin: 5px;
  padding: 10px;
  text-align: center;
  width: 100%;
}

.del {
  border: 2px solid orangered;
  padding: 5px;
  margin: 5px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50px;
  left: 50%;
}

.create {
  border: 2px solid rgb(52, 194, 52);
  padding: 5px;
  margin: 5px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <form @submit.prevent>
    <input v-model="name" type="text" placeholder="Введите задачу" class="input"> <br> <br>
    <button @click="create()" class="create">Создать</button> <br>
    <button @click="del()" class="del">Удалить</button>
  </form>
  <div class="todolist" v-for="(todolist,index,) in list">
    <div @click="on(index)" v-bind:class="{ on: select === index }">
      Название: {{ todolist.body }}
    </div>
  </div>
</div>