Untitled

// Homepage.vue
<template>
  <div class="home">
    <TaskList></TaskList>
  </div>
</template>

<script lang="ts">
import { TaskList } from '@/components'
export default {
  name: 'HomePage',
  components: { TaskList }
}
</script>

// TaskList
<template>
  <div class="tasksList_container">
    <template v-if="tasks.length">
      <template v-for="task in tasks">
        <TaskListItem :task="task" :key="task.id" />
      </template>
    </template>
    <template v-else>
      <p>Non ci sono task</p>
    </template>
  </div>
</template>

<script lang="ts">
import { TaskListItem } from '@/components'
import { mapGetters } from 'vuex'

export default {
  name: 'TaskList',
  components: { TaskListItem },
  computed: {
    ...mapGetters({
      tasks: 'getTaskList'
    })
  }
}
</script>

// task List Item
<template>
  <div class="task-item_container">
    {{ task }}
    ciao
  </div>
</template>

<script lang="ts">
export default {
  name: 'TaskListItem',
  components: {},
  props: {
    task: {
      type: Object
    }
  }
}
</script>


// barrel file 

export { default as Header } from './layout/Header.vue'
export { default as TaskList } from './tasks/TaskList.vue'
export { default as TaskListItem } from './tasks/TaskListItem.vue'
export { default as Card } from './common/Card.vue'