TodoList.vue Component

TodoList.vue

<template>
  <div id="app">
    <h1>My Todo App</h1>
    <todo-list :title="morning.title" :todos="morning.todos"></todo-list>
    <todo-list :title="nightly.title" :todos="nightly.todos"></todo-list>
  </div>
</template>

<script>
import TodoList from "@/components/TodoList";

export default {
  name: "app",
  components: {
    TodoList
  },
  data() {
    return {
      morning: {
        title: "My Nightly Routine",
        todos: [
          { id: 1, task: "Wake up", completed: false },
          { id: 2, task: "5 Minute Morning Movement", completed: false },
          { id: 3, task: "Meditate", completed: false }
        ]
      },
      nightly: {
        title: "My Nightly Routine",
        todos: [
          { id: 4, task: "Eat Dinner", completed: false },
          { id: 5, task: "Brush Teeth", completed: false },
          { id: 6, task: "Go to Sleep", completed: false }
        ]
      }
    };
  }
};
</script>

<style>
</style>