Ejercicio: Lista de Tareas

Objetivo: Crear un componente Vue que maneje una lista de tareas. El componente
debe mostrar la lista de tareas, permitir agregar nuevas tareas, marcar las tareas como
completadas y eliminar tareas de la lista.
Yo debo poder crear N cantidad de listas de tarea asignándoles un nombre (header*)
Instrucciones:
• Componentes: El componente debe estar estructurado de manera que los
elementos de la lista de tareas y las tareas (TaskItem) sean componentes
separados.
• Props & Slots: El componente TaskList debe aceptar un slot llamado header*
para mostrar un encabezado personalizado antes de la lista de tareas.
• Reactividad: La lista de tareas debe ser reactiva, lo que significa que al agregar,
eliminar o marcar una tarea como completada, la interfaz de usuario debe
actualizarse automáticamente para reflejar los cambios.
• Emits: El componente TaskItem debe emitir un evento personalizado cuando se
marque una tarea como completada.
• Directivas: Utiliazar la directiva v-if para mostrar un mensaje cuando no haya
tareas en la lista, utilizar las directivas de diseño para validaciones, errores y
más.
• Datos Computados: Cree un dato computado para calcular el número total de
tareas y el número de tareas completadas.
• Validaciones: Agregar validaciones a los tipos de datos que vamos a recibir, así
como la interfaz para las tareas.
• Nomenclaturas: Manejar un estándar en la creación de carpetas, archivos y
componentes.
• Punto Extra (Opcional): Implemente alguna animación o transición cuando se
agreguen o eliminen tareas de la lista.
Interfaz base, agregar 2 valores y su tipo de dato.
{
id: number
title: string
completed: boolean
}