Где ошибка в ToDo List на Vue?

<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>