main.js

Vue.component('tasks', {

    template: '#tasks-template',

    created: function () {
        this.fetchTaskList()
    },

    methods: {
        fetchTaskList: function() {
                this.$http.get('api/tasks'), function(tasks) {
                    this.list = tasks;
                };
        },

        toggleCompletedFor: function(task) {
            task.completed = ! task.completed;
        },

        isCompleted: function(task) {
            return task.completed;
        },

        isInProgress: function(task) {
            return ! this.isCompleted(task)
        },

        deleteTask: function(task) {
            this.list.splice(this.list.indexOf(task), 1);
        }
    },

    computed: {
        remaining: function() {
            var vm = this
            return this.list.filter(this.isInProgress).length
        }
    }


});

new Vue({
    el: '#app',

    data: function () {
    return {
        list: null
        }
    }

})