<template>
  <div>
    <ul class="list-group list-group-flush">
      <TaskItem
        v-for="(task, i) of tasks"
        v-bind:task="task"
        v-bind:index="i"
        v-on:remove-task="removeTask"
      />
    </ul>
  </div>
</template>

<script>
import TaskItem from '@/components/TaskItem'
export default {
  props: ['tasks'],
  components: {
    TaskItem
  },
  methods: {
    removeTask(id) {
      this.$emit('remove-task', id)
    }
  },


}
</script>

