Multi-Step Profile Settings Form

Problem/Feature Description

A B2B SaaS company is building a "Profile Settings" page in their Vue 3 app. The form lets users update their display name, email, and job title. There's a known problem in their current prototype: after a user submits the form and the team wants to reset all fields back to their initial blank values to prepare for another edit, the form stops responding to user input — the fields appear to clear visually but typing in them no longer updates the displayed values. The team suspects this is a reactivity issue and wants a clean rewrite.

The form also needs to pre-fill from the user's current profile fetched from /api/profile (returning { name: string, email: string, jobTitle: string }). When the user submits, the values should be POSTed to /api/profile. On success, the form should reset to a pristine empty state and display a brief success confirmation. On error, the form should stay populated (so the user doesn't lose their input) and display an error message.

Output Specification

Produce the following files:

• src/components/ProfileSettingsForm.vue — the settings form component that fetches the current profile on load, pre-fills the form, handles submit/reset, and manages loading and error states.

Use TypeScript throughout. The component should manage form field state using Vue's reactivity system. A developer reviewing the code should be able to see that the reset behavior will work correctly after a rewrite.