Application/example-4.html

<!DOCTYPE html>
<html>

<head>
    <title>Example 4</title>
</head>

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

        <p>Getting the todo list from an external API like <a href="https://jsonplaceholder.typicode.com/">https://jsonplaceholder.typicode.com/</a></p>

        <todo-item v-for="todo in todos"
          v-bind:todo="todo"
          v-bind:key="todo.id"
          v-on:completed="onCompleted(todo)"></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" :id="todo.id" v-model="todo.completed" @change="todoCompleted">
                <label :for="todo.id">{{ todo.title }}</label>
            </li>`,
            methods: {
                todoCompleted: function () {
                    this.$emit('completed', this.todo)
                }
            }
        })

        var vm = {
            el: '#app',
            data: {
                message: 'Hello Vue!',
                todos: []
            },
            methods: {
                onCompleted: function (todo) {
                    fetch(`https://jsonplaceholder.typicode.com/todos/${todo.id}`, {
                      method: 'POST',
                      headers: {
                        'Content-Type': 'application/json'
                      },
                      body: JSON.stringify(todo)
                    }).then(res => res.json())
                      .then(response => console.log('Success:', JSON.stringify(response)))
                      .catch(error => console.error('Error:', error))
                }
            },
            created() {
                fetch('https://jsonplaceholder.typicode.com/todos')
                    .then(response => response.json())
                    .then(todos => this.todos = todos)
            }
        }

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

</html>