The question here is how can I get this Task.vue file to loop in my tasklist.vue file knowing I'm willing to pass a json file so I can get the list of all the task to do.

**Task.vue**

```
<template>
    <table :id="id" class="task_box">
        <tr>
            <td class="task_user">{{name}}</td>
            <td class="task_date">{{date}}</td>
            <td class="task_time">{{time}}</td>
        </tr>
        <tr>
            <td colspan="3" class="task_description">
                <div class="toto">{{description}}</div>
            </td>
        </tr>
    </table>
</template>

<script>
export default {
  name: "task",
  data() {
    return {
      id: 1,
      name: "Test",
      date: new Date(),
      time: "9:30 ",
      description: "whatever"
    };
  }
};
</script>

```

So this task.vue is meant to be a container that I can use in the tasklist.vue.

**tasklist.vue**

```
<template>
    <div>
        <task v-for="task in tasks" :key="task.id"></task>
    </div>
</template>

<script>
import Task from "./Task.vue";

export default {
  name: "tasklist",
  data() {
    return {
      tasks: []
    };
  },
  components: {
    Task
  }
};
</script>

```