Asynchronous Data Loading with Vue and TypeScript

This challenge focuses on implementing asynchronous data fetching within a Vue component using TypeScript. You'll be responsible for creating a component that fetches data from an API endpoint and displays it, handling loading and error states gracefully. This is a common pattern in modern web development and crucial for building dynamic and responsive user interfaces.

Problem Description

You need to create a Vue component called UserList that fetches a list of users from a mock API endpoint (https://jsonplaceholder.typicode.com/users) and displays them. The component should:

1. Fetch Data Asynchronously: Use async/await to fetch the user data from the API.
2. Handle Loading State: Display a loading indicator (e.g., "Loading...") while the data is being fetched.
3. Handle Error State: Display an error message (e.g., "Error fetching users") if the API request fails.
4. Display Data: Once the data is successfully fetched, display a list of users, showing at least their id, name, and email.
5. Use TypeScript: The component should be written in TypeScript, with appropriate type annotations for data and state.

Expected Behavior:

• Upon component mount, the component should immediately start fetching data.
• While fetching, a loading indicator should be visible.
• If the API call is successful, the user list should be displayed.
• If the API call fails (e.g., network error, server error), an error message should be displayed.
• The component should remain responsive and not freeze during data fetching.

Edge Cases to Consider:

• Network errors (e.g., no internet connection).
• Server errors (e.g., 500 Internal Server Error).
• Empty API response (although unlikely with this specific endpoint, it's good practice to handle).

Examples

Example 1:

Input:  Component mounted, API call successful.
Output: A list of users displayed, each showing id, name, and email.
Explanation: The component successfully fetches the user data and renders it.

Example 2:

Input: Component mounted, API call fails due to network error.
Output: An error message "Error fetching users" displayed.
Explanation: The component catches the error and displays a user-friendly error message.

Example 3:

Input: Component mounted, API returns a 500 error.
Output: An error message "Error fetching users" displayed.
Explanation: The component catches the error and displays a user-friendly error message.

Constraints

• API Endpoint: Use https://jsonplaceholder.typicode.com/users as the data source.
• Data Display: Display at least the id, name, and email properties of each user.
• Loading Indicator: Use a simple text-based loading indicator (e.g., "Loading...").
• Error Message: Use a clear and concise error message (e.g., "Error fetching users").
• TypeScript: Strict type checking is expected.
• Vue Version: Assume Vue 3 and Composition API.

Notes

• Consider using try...catch blocks to handle potential errors during the API call.
• Use ref from Vue to manage the loading state and the user data.
• Think about how to update the UI to reflect the different states (loading, error, success).
• This challenge focuses on the asynchronous data fetching and state management aspects. Styling is not required.
• You can use any standard JavaScript libraries for error handling or formatting, but keep the solution concise.