Mastering Vue's Computed Properties with Setters

Computed properties are a powerful feature in Vue.js for deriving state. However, sometimes you need to not only read derived state but also to modify the underlying data that influences it. This challenge will guide you through implementing a computed property with a setter in Vue, a less common but highly useful pattern.

Problem Description

Your task is to create a Vue component that manages a user's full name, derived from their first and last names. Crucially, you will implement a computed property for the full name that not only reads the combined name but also allows you to set the full name, which in turn should correctly update the separate first and last name properties.

Key Requirements:

1. Data Properties: The component must have two ref data properties: firstName (string) and lastName (string).
2. Computed Property (Getter): Create a computed property named fullName that returns the combination of firstName and lastName with a space in between (e.g., "John Doe").
3. Computed Property (Setter): Implement a setter for fullName. When fullName is assigned a new value (e.g., "Jane Smith"), it should:
   • Parse the new full name string to extract the first and last names.
   • Update the firstName and lastName ref properties accordingly.
   • Handle cases where the input might have leading/trailing spaces or multiple spaces between names.
4. User Interface: Provide simple input fields for firstName and lastName, and display the fullName in a read-only element. Demonstrate the setter by allowing the user to edit the fullName directly and observe the firstName and lastName inputs updating.

Expected Behavior:

• When the user types "John" in the first name input and "Doe" in the last name input, the displayed full name should be "John Doe".
• If the user directly edits the displayed full name to "Jane Smith", the first name input should update to "Jane" and the last name input to "Smith".
• The setter should intelligently handle potential formatting issues in the input string for fullName.

Edge Cases to Consider:

• Inputting an empty string to fullName.
• Inputting a single name (e.g., "Cher") to fullName.
• Inputting multiple spaces between names (e.g., "Peter Jones").
• Inputting leading or trailing spaces (e.g., " Alice Wonderland ").

Examples

Example 1: Initial State and Basic Input

Initial State:
firstName = "John"
lastName = "Doe"

User Interface:
First Name Input: John
Last Name Input: Doe
Displayed Full Name: John Doe

User Action: Types "Jane" into the first name input.
Component State:
firstName = "Jane"
lastName = "Doe"

User Interface Update:
Displayed Full Name: Jane Doe

Example 2: Using the Setter

Initial State:
firstName = "Peter"
lastName = "Pan"

User Interface:
First Name Input: Peter
Last Name Input: Pan
Displayed Full Name: Peter Pan

User Action: Directly edits the displayed Full Name to "Wendy Darling".
Component State (after setter execution):
firstName = "Wendy"
lastName = "Darling"

User Interface Update:
First Name Input: Wendy
Last Name Input: Darling

Example 3: Edge Case - Single Name Input via Setter

Initial State:
firstName = "Alice"
lastName = "Wonderland"

User Interface:
First Name Input: Alice
Last Name Input: Wonderland
Displayed Full Name: Alice Wonderland

User Action: Directly edits the displayed Full Name to "Cher".
Component State (after setter execution):
firstName = "Cher"
lastName = ""  (or handle as appropriate, e.g., first name is "Cher", last name is empty)

User Interface Update:
First Name Input: Cher
Last Name Input:

Constraints

• The solution must be implemented using Vue 3 Composition API with TypeScript.
• All state management must be done using Vue's ref or reactive.
• The computed property and its setter must be defined using computed.
• The application should be runnable in a standard Vue development environment.

Notes

• Consider using string manipulation methods like trim(), split(), and join() to handle the parsing and formatting within the setter.
• Think about how you want to handle cases where the user might input only one name. The setter's logic should define this behavior.
• The goal is to demonstrate a clean and functional computed property with both a getter and a setter.