Vue.component('task', {
  template: '<li><slot></slot></li>',
});

Vue.component('task-list', {
  template: `
<ul>
  <task v-for="task in tasks">
    {{ task.task }}
  </task>
</ul>
`,

  data() {
    return {
      tasks: [
        { task: 'Go to the store', completed: true },
        { task: 'Finish screencast', completed: false },
        { task: 'Fix dinner', completed: true },
        { task: 'Clean room', completed: false },
        { task: 'Make donation', completed: true },
      ]
    };
  }
});

const app = new Vue({
  el: '#root',
  data: {
  },
});