Order History Feature

Problem/Feature Description

A logistics SaaS company has a Vue 3 dashboard that currently hardcodes fake order data directly inside a component. As the product grows, multiple views across the app need to display order information — an order list page, a summary widget in the sidebar, and a details drawer. Each of these will need to fetch from /api/orders (which returns { data: Order[] } where Order has id, status, createdAt, and total) and manage the usual loading and error states independently.

The lead developer wants to extract the data-fetching concern into a reusable piece of logic so it can be shared without duplication, and so each consumer still controls its own state independently. They also want to make sure the code handles edge cases cleanly: when a user hits retry after an error, the previous error message should disappear immediately; when the fetch is in-flight, a loading indicator should be shown. Additionally, the team has discovered a subtle bug in a prototype where resetting a form object caused reactivity to break silently — the solution should avoid that pitfall.

Output Specification

Produce the following files:

• A reusable TypeScript module that encapsulates fetching orders from /api/orders, managing async state, and exposing a way to retry the request.
• src/components/OrderList.vue — a Vue 3 component that uses the reusable module and renders the three UI states (loading, error with retry, and the list of orders showing id, status, and total).

Use TypeScript throughout.