Prioritized Task Scheduler in Vue.js

This challenge focuses on building a simple task scheduler within a Vue.js application that incorporates priority levels. The scheduler should allow users to add tasks with varying priorities, and execute them in order of priority (highest priority first). This is a common requirement in many applications, from background processing to UI updates, and understanding how to manage priorities is crucial for efficient resource allocation.

Problem Description

You are tasked with creating a Vue.js component that manages a list of tasks, each with a priority level. The component should allow users to:

Add Tasks: Input a task description and assign a priority (1-5, where 1 is the highest priority and 5 is the lowest).
Display Tasks: Show the list of tasks, including their descriptions and priorities.
Execute Tasks (Simulated): Implement a "Run Scheduler" button. When clicked, the scheduler should process and "execute" tasks in descending order of priority (1 to 5). "Execution" in this case is simulated – simply log the task description to the console with a timestamp.
Clear Tasks: Implement a "Clear Scheduler" button. When clicked, all tasks should be removed from the scheduler.

Key Requirements:

Use Vue.js 3 and TypeScript.
The task data should be stored in a reactive array within the Vue component.
The scheduler logic (task execution) should be encapsulated within the component.
Priorities must be handled correctly – higher priority tasks should be executed before lower priority tasks.
The UI should be clean and intuitive.

Expected Behavior:

When a new task is added, it should immediately appear in the task list.
Clicking "Run Scheduler" should log tasks to the console in priority order (1, 2, 3, 4, 5). Each log should include a timestamp.
Clicking "Clear Scheduler" should remove all tasks from the list and clear the console.
Error handling: If a user attempts to add a task with an invalid priority (not between 1 and 5), display an appropriate error message.

Edge Cases to Consider:

Empty task list: "Run Scheduler" should do nothing if there are no tasks.
Invalid priority input: Handle cases where the user enters a non-numeric or out-of-range priority.
Large number of tasks: While not a primary concern, consider how the scheduler might perform with a significant number of tasks (e.g., 100+).

Examples

Example 1:

Input: Tasks: [ {description: "Task A", priority: 1}, {description: "Task B", priority: 3}, {description: "Task C", priority: 2} ]
Output: Console logs (in order):
[Timestamp] "Executing Task A"
[Timestamp] "Executing Task C"
[Timestamp] "Executing Task B"
Explanation: Tasks are executed in descending order of priority.  Timestamps are added to show the order of execution.

Example 2:

Input: Tasks: [ {description: "Task X", priority: 5}, {description: "Task Y", priority: 1} ]
Output: Console logs (in order):
[Timestamp] "Executing Task Y"
[Timestamp] "Executing Task X"
Explanation:  Even with a small number of tasks, the priority order is maintained.

Example 3: (Edge Case - Empty List)

Input: Tasks: []
Output: No console logs.
Explanation: The scheduler does nothing when the task list is empty.

Constraints

Priority Range: Task priorities must be integers between 1 and 5 (inclusive).
Input Type: Task descriptions should be strings.
Performance: The scheduler should execute tasks reasonably quickly, even with a moderate number of tasks (up to 50). Optimization is not the primary focus, but avoid excessively inefficient algorithms.
Vue Version: Use Vue.js 3.
TypeScript: The solution must be written in TypeScript.

Notes

Consider using Vue's reactivity system (ref or reactive) to manage the task list.
You can use console.log to simulate task execution. No actual background tasks are required.
Focus on the core logic of prioritizing and executing tasks. Styling is not required.
Think about how to handle user input validation for the priority field.
A simple HTML structure with input fields, a button, and a task list display is sufficient.