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">
    <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: {
        list:[
            {text: 'Vue.jsを導入する'},
            {text: 'データを表示してみる'},
            {text: '入力内容を表示してみる'},
            {text: '配列を表示してみる'},
            {text: '配列にデータを追加する'},
        ],
    },
});