devComponent

<template>
    <div>
        <input type="text" v-model="newName">
        <button @click="addName">Add Name</button>
        <button :class="{ 'is-loading' : isLoading }" @click="toggleClass">Click me</button>

        <h1>All Tasks</h1>
        <ul>
            <li v-for="task in tasks" v-text="task.description"></li>
        </ul>

        <h1>Incomplete Tasks</h1>
        <ul>
            <li v-for="task in incompleteTasks" v-text="task.description"></li>
        </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                message: 'Hello World',
                isLoading: false,
                className: 'color-red',
                title: 'This is some title set via javascript',
                newName: '',
                names: ['joe', 'james', 'blah', 'ok'],
                tasks: [
                    {description: 'Something to do', completed: true},
                    {description: 'Something else', completed: false},
                    {description: 'Go to store', completed: false},
                    {description: 'Pick nose', completed: false},
                    {description: 'Eat dinner', completed: true}
                ]
            };
        },
        methods: {
            addName() {
                this.names.push(this.newName);
                this.newName = '';
            },
            toggleClass() {
                this.isLoading = true;
            }
        },
        computed: {
            incompleteTasks() {
                return this.tasks.filter(task => ! task.completed);
            }
        },
        mounted() {
            console.log('component mounted');
        }
    }
</script>