Where is the error in ToDo List on Vue?

Question

Vue.js

There is an HTML index file with Vue connected via CDN.
New tdlist tasks are added with a bang, but the problem with deleting the last task, it simply does not delete.
I can't figure it out, please help.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="root">
  <ul>
    <li v-for="on in list" v-bind:key="on.key">{{ on.title }}<button v-on:click="deleteList(on.key)">Delete</button></li>
  </ul>
  <input v-model="gulp">
  <br>
  <button v-on:click="addList">Add</button>
</div>
<script>
  const vm = new Vue({
    el: '#root',
    data: {
      list: [],
      keys: 0,
      gulp: '',
    },
    methods: {
      addList: function() {
        this.list.push({ title: this.gulp, key: this.keys++ });
      },
      deleteList: function(num) {
        this.list.splice(num, 1);
      },
    },
  });
</script>

Answer 1

This is
turn into it

<li v-for="(on, index) in list" v-bind:key="on.key">{{ on.title }}<button v-on:click="deleteList(index)">Delete</button></li>

Answer 2

1) everything worked and so
2) you do not need to generate the key manually

key: this.keys++

you can use the ready-made key index: 3) when adding a new element, it is worth clearing the input field, otherwise you have to clear the field manually all the time