I'm trying to learn Vue.js. First time making a small to-do app and I'm trying to delete each individual task on click, but nothing is happening. I've been watching a bunch of youtube tutorials to try to figure it out but no luck :( Any help appreciated! I don't think I am passing through the $emit and the id correctly.

Also, if anyone has any helpful tutorials please let me know!

App.vue

<template>
  <Tasks :tasks="tasks" @delete-task="deleteTask" />
</template>

<script>
import Tasks from "./components/Tasks.vue";

export default {
  name: "App",
  components: {
    Tasks,
  },
  data() {
    return {
      tasks: [],
    };
  },
  methods: {
    deleteTask(id) {
      this.tasks = this.tasks.filter((task) => task.id !== id);
    },
    addTask(newTask) {
      this.tasks = [...this.tasks, newTask];
    },
  },
  created() {
    this.tasks = [
      {
        id: 0,
        text: "Grocery shopping",
        date: "March 25, 2022",
        reminder: true,
      },
      {
        id: 1,
        text: "Doctors Appointment",
        date: "March 30, 2022",
        reminder: true,
      },
      {
        id: 2,
        text: "Pay Bills",
        date: "April 1, 2022",
        reminder: false,
      },
    ];
  },
};
</script>

Tasks.vue

<template>
  <div>
    <Task :tasks="tasks" @delete-task="$emit('delete-task')" />
  </div>
</template>

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

export default {
  name: "Tasks",
  emits: ["delete-task"],
  components: {
    Task,
  },
  props: {
    tasks: Array,
  },
};
</script>

Task.vue

<template>
  <div v-for="task in tasks" :key="task.id" @click="onDelete(task.id)">
    <p>{{ task.text }}</p>
    <p>{{ task.date }}</p>
  </div>
</template>

<script>
export default {
  name: "Task",
  emits: ["delete-task"],
  props: {
    tasks: Object,
  },
  methods: {
    onDelete(id) {
      this.$emit("delete-task", id);
    },
  },
};
</script>