App.vue

<template>
    <div x-data="{ ...todos, countdown: 10 }" :class="{ done: done }">
        <div v-if="done">
            <h1>Completed!</h1>
        </div>
        <div v-else>
            <h1>Todo List</h1>
            <ol>
                <li v-for="todo in todos" x-transition>
                    <Checkbox v-model="todo.completed" @toggle="completeTodo(todo)" />
                    {{ todo.title }}
                    {{ todo.completed ? 'done' : 'to-do' }}
                </li>
            </ol>
            <div class="footer">
                <p>{{ countdown }} seconds left</p>
            </div>
            <button x-data="{ show: true }" x-show="show" x-on:click="show = false">Stop Timer</button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            todos: [
                { title: 'Todo 1', completed: false },
                { title: 'Todo 2', completed: false },
                { title: 'Todo 3', completed: false },
                { title: 'Todo 4', completed: false },
                { title: 'Todo 5', completed: false }
            ]
        }
    },
    methods: {
        completeTodo(todo) {
            todo.completed = !todo.completed
            this.countdown = 10
        }
    },
    mounted() {
        console.log('mounted')
    }
}
</script>