Vue Microtask Queue Manager

This challenge asks you to build a Vue component that manages a queue of microtasks. Microtasks are operations that are executed immediately after the current task completes, but before the browser repaints. This is useful for performing small, asynchronous operations in a controlled and predictable manner, especially when dealing with UI updates or data processing that needs to happen quickly after a user interaction.

Problem Description

You need to create a Vue component called MicrotaskQueueManager that handles a queue of functions (microtasks). The component should provide the following functionalities:

• Adding Microtasks: A method to add functions to the queue. These functions will be executed sequentially as microtasks.
• Executing the Queue: A method to start executing the microtasks in the queue. Execution should be sequential, meaning each function in the queue is called only after the previous one has completed.
• Pausing/Resuming: A method to pause the queue execution. When paused, no new microtasks should be executed until resumed.
• Clearing the Queue: A method to clear all microtasks from the queue.
• Queue Status: A reactive property that indicates whether the queue is currently running, paused, or idle.
• Error Handling: If a microtask throws an error, the queue should not stop executing. The error should be logged to the console, and the queue should continue processing the remaining tasks.

Key Requirements:

• The component should be written in TypeScript.
• Use Vue's reactivity system to manage the queue and its status.
• Ensure that microtasks are executed sequentially using setTimeout(..., 0) to leverage the microtask queue. This is crucial for ensuring the correct order of execution.
• The component should be reusable and easily integrated into other Vue components.

Expected Behavior:

• Adding a microtask should add it to the end of the queue.
• Starting the queue should begin executing the microtasks sequentially.
• Pausing the queue should halt execution until resumed.
• Clearing the queue should remove all tasks.
• The queue status should accurately reflect the current state (running, paused, idle).
• Errors within microtasks should be handled gracefully without stopping the queue.

Examples

Example 1:

Input:
  - Queue is initially empty.
  - Add microtasks:
    - task1: `() => console.log('Task 1')`
    - task2: `() => console.log('Task 2')`
  - Start the queue.
Output:
  - Console output:
    - "Task 1"
    - "Task 2"
Explanation: The tasks are executed sequentially due to the use of `setTimeout(..., 0)`.

Example 2:

Input:
  - Queue contains:
    - task1: `() => console.log('Task 1')`
    - task2: `() => { throw new Error('Task 2 failed'); }`
    - task3: `() => console.log('Task 3')`
  - Start the queue.
Output:
  - Console output:
    - "Task 1"
    - Error message: "Error: Task 2 failed" (logged to console)
    - "Task 3"
Explanation: Task 2 throws an error, but the queue continues to execute Task 3.

Example 3:

Input:
  - Queue is running with task1.
  - Pause the queue.
  - Add task2: `() => console.log('Task 2')`
  - Resume the queue.
Output:
  - Console output:
    - "Task 1" (executed before pause)
    - "Task 2" (executed after resume)
Explanation:  Pausing halts execution, and resuming continues from where it left off.

Constraints

• The maximum number of microtasks that can be added to the queue at any given time is 100.
• Each microtask function should take no arguments.
• The execution of each microtask should complete within 100ms. (While not strictly enforced, consider this for potential performance implications).
• The component should be lightweight and have minimal overhead.

Notes

• Consider using a simple array to store the microtasks.
• setTimeout(..., 0) is key to leveraging the microtask queue. Directly calling functions in sequence will not achieve the desired behavior.
• Think about how to handle the queue status effectively using Vue's reactivity system.
• Error handling is important to prevent the entire queue from failing due to a single task.
• Focus on creating a clean, well-structured, and reusable component.