Vuejs Todo App

//Create a new Vue instance where we define the DOM element that Vue should manage, in this case el: '#app' with the data objects newTodo and todos
new Vue({
  el: '#app',

  data: {
    newTodo: '',
    todos: [{
      task: 'Learn vuejs',
      completed: false
    }, {
      task: 'Build a todo app',
      completed: true
    }]
  }
});

/*Create a child instance of vue where we define a new component called 'my-tasks' and pass through the properties 'list' 
and 'new-task' from our parent by using props*/
Vue.component('my-tasks', {
  props: ['list', 'new-task'],

/*We are defining a template called '#my-tasks-template' that 
will be used for our component <my-tasks>*/
  template: '#my-tasks-template',

//Computed property for logic and method property for functions
  computed: {
    complete: function(todo){
      return this.list.filter(this.isCompleted);
    },

    remaining: function(todo) {
      return this.list.filter(this.inProgress);
    }
  },

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

    inProgress: function(todo){
      return ! this.isCompleted(todo);
    },

    addTodo: function (todo) {
      var text = this.newTask.trim();
      this.list.push({
        task: text,
        completed: false
      });
      this.newTask = '';
    },

    removeTodo: function (todo) {
      this.list.$remove(todo);
    },

    editTodo: function (todo) {
      this.removeTodo(todo);
      this.newTask = todo.task;
    },
    completed: function(todo){
      todo.completed = ! todo.completed;
    },
    clearAllCompleted: function(){
    this.list = this.list.filter(this.inProgress);
    }
  }
});

<!--We will have to set an attribute on our component to bind 
list to todos and newTask to newTodo-->
<my-tasks :list="todos" :new-task="newTodo">

<!--Use v-model for data binding, here we are binding an element to our data object newTask and an onkeyup event to invoke our method 'addTodo'-->
<input class="form-control" v-model="newTask" @keyup.enter="addTodo(todo)">
<!--NOTE: when we are refering newTask to new-task we are using 
camelCase for newTask and kebab-case for our 
html attribute new-task.-->

<!--Render our computed method remaining using v-show and output the length of remaining todos using double mustache tags-->
<span v-show="remaining">({{ remaining.length }})</span>

<!--Using rendering condition v-for. Every item inside remaining in this case we refer to items as "todo", output the todo.task-->
<li class="list-group-item list-group-item-info" v-for="todo in remaining">
  <span>{{ todo.task }}</span> <!--Again inside double
  mustache tag-->

<!--Set v-else on element for conditional rendering-->
 <p v-else>No tasks yet, get a life and add some tasks!</p>

<!--Use v-if directive to render number of completed todos if any todo are completed-->
 <div v-if="complete.length">