Learn Vue 3: Step By Step, Episode 13 - Lifecycle Hooks, Fake APIs, and AJAX - https://laracasts.com/series/learn-vue-3-step-by-step/episodes/13

Assignments.js

import AssignmentList from "./AssignmentList.js";
import AssignmentCreate from "./AssignmentCreate.js";

export default {
    components: { AssignmentList, AssignmentCreate },

    template: `
        <section class="space-y-6">
            <assignment-list :assignments="filters.inProgress" title="In Progress"></assignment-list>
            <assignment-list :assignments="filters.completed" title="Completed"></assignment-list>
            
            <assignment-create @add="add"></assignment-create> 
        </section>
    `,

    data() {
        return {
            assignments: [],
        }
    },

    computed: {
        filters() {
            return {
                inProgress: this.assignments.filter(assignment => ! assignment.complete),
                completed: this.assignments.filter(assignment => assignment.complete)
            };
        }
    },

    created() {
        fetch('http://localhost:3001/assignments')
            .then(response => response.json())
            .then(assignments => {
                this.assignments = assignments;
            });
    },

    methods: {
        add(name) {
            this.assignments.push({
                name: name,
                completed: false,
                id: this.assignments.length + 1
            });
        }
    }
}

db.json

{
  "assignments": [
    {
      "name": "Finish project",
      "complete": false,
      "id": 1,
      "tag": "math"
    },

    {
      "name": "Read chapter 4",
      "complete": false,
      "id": 1,
      "tag": "science"
    },

    {
      "name": "Turn in homework",
      "complete": false,
      "id": 1,
      "tag": "math"
    },

    {
      "name": "Finish Laracasts video",
      "complete": true,
      "id": 1,
      "tag": "programming"
    }
  ]
}

package.json

{
  "devDependencies": {
    "json-server": "^0.17.0"
  }
}