Application/example-2.html

<!DOCTYPE html>
<html>

<head>
    <title>Example 2</title>
</head>

<body>
    <div id="app">
        {{ message }}

        <todo-item v-for="todo in todos" v-bind:todo="todo" v-bind:key="todo.id"></todo-item>
    </div>
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var todoItem = Vue.component('todo-item', {
            props: ['todo'],
            template: `
            <li>
                <input type="checkbox" v-model="todo.completed">
                {{ todo.title }}
            </li>`
        })

        var vm = {
            el: '#app',
            data: {
                message: 'Hello Vue!',
                todos: [{
                        id: 1,
                        title: 'go shopping',
                        completed: true
                    },
                    {
                        id: 2,
                        title: 'sport training'
                    }
                ]
            }
        }

        var app = new Vue(vm)
    </script>
</body>

</html>