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 }}</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
                });
                this.addText = '';  //入力値初期化
            }
        }
    }
});