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,index) in list">
        <li>{{ index + 1 }}:{{ todo.text }}</li>
    </ul>
</div>

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

JavaScript

var app = new Vue({
    el: '#app',
    data: {
        addText: '',
        list:[],
    },
    methods: {
        addToDo() {
            this.list.push({
                text: this.addText
            });
            this.addText = '';  //入力値初期化
        }
    }
});