JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>ToDo List</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <input type="text" v-model="addText" placeholder="ToDoを入力">
    <button v-on:click="addToDo()">追加</button>
    <hr>
    <ul v-for="todo in list">
        <li>{{ todo.id }}:{{ todo.text }}
            <button @click="deleteToDo(todo.id)">削除</button>
            <button @click="editToDo(todo.id)">更新</button>
        </li>
    </ul>
</div>

<script src="contents.js"></script>
</body>
</html>

JavaScript

var app = new Vue({
    el: '#app',
    data: {
        addText: '',
        list: [],
        uniqueKey: 0,
    },
    methods: {
        addToDo() {
            if (this.addText) {
                this.list.unshift({
                    'text': this.addText,
                    'id': this.uniqueKey + 1
                });
                this.addText = '';  //入力値初期化
                this.uniqueKey++;
            }
        },
        deleteToDo(id) {
            var deleteIndex = '';
            var check = confirm('本当に削除しますか？');
            if (check === true) {    //アラートでOKが押下されたら
                this.list.some(function (value, index) {
                    if (value.id === id) {
                        deleteIndex = index;
                    }
                });
                this.list.splice(deleteIndex, 1);
            }
        },
        editToDo() {

        }
    }
});