11.3 Display Tasks and Completed in own list

src/components/Tasks/TasksCompleted.vue

@@ -0,0 +1,33 @@
+<template>
+    <q-list
+      v-if="Object.keys(tasksCompleted).length"
+      separator
+      bordered>
+
+      <task
+        v-for="(task, key) in tasksCompleted"
+        :key="key"
+        :task="task"
+        :id="key"
+      ></task>
+
+    </q-list>
+</template>
+
+<script>
+import task from 'components/Tasks/Task.vue'
+
+export default {
+  name: 'TasksCompleted',
+  components: {
+    task
+  },
+  props: [
+    'tasksCompleted'
+  ]
+}
+</script>
+
+<style>
+
+</style>

src/components/Tasks/TasksTodo.vue

@@ -0,0 +1,33 @@
+<template>
+    <q-list
+      v-if="Object.keys(tasksTodo).length"
+      separator
+      bordered>
+
+      <task
+        v-for="(task, key) in tasksTodo"
+        :key="key"
+        :task="task"
+        :id="key"
+      ></task>
+
+    </q-list>
+</template>
+
+<script>
+import task from 'components/Tasks/Task.vue'
+
+export default {
+  name: 'TasksTodo',
+  components: {
+    task
+  },
+  props: [
+    'tasksTodo'
+  ]
+}
+</script>
+
+<style>
+
+</style>

src/pages/PageTodo.vue

@@ -1,18 +1,13 @@
 <template>
   <q-page class="q-pa-md">
-    <q-list
-      v-if="Object.keys(tasksTodo).length"
-      separator
-      bordered>
 
-      <task
-        v-for="(task, key) in tasksTodo"
-        :key="key"
-        :task="task"
-        :id="key"
-      ></task>
+    <tasks-todo
+      :tasksTodo="tasksTodo" />
 
-    </q-list>
+    <hr>
+
+    <tasks-completed
+      :tasksCompleted="tasksCompleted" />
 
     <div class="absolute-bottom text-center q-mb-lg">
       <q-btn
@@ -33,12 +28,16 @@
 
 <script>
 import { mapGetters } from 'vuex'
+import tasksTodo from 'components/Tasks/TasksTodo.vue'
+import tasksCompleted from 'components/Tasks/TasksCompleted.vue'
+import addTask from 'components/Tasks/Modals/AddTask.vue'
 
 export default {
   name: 'PageTodo',
   components: {
-    task: require('components/Tasks/Task.vue').default,
-    addTask: require('components/Tasks/Modals/AddTask.vue').default
+    tasksTodo,
+    tasksCompleted,
+    addTask
   },
   data () {
     return {
@@ -46,7 +45,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters('tasks', ['tasksTodo'])
+    ...mapGetters('tasks', ['tasksTodo', 'tasksCompleted'])
   }
 }
 </script>