Vue Watch Callback with Dynamic Arguments

This challenge focuses on implementing a Vue watch callback that dynamically receives arguments based on the watched variables. Creating flexible and reusable watch callbacks is a common requirement in Vue applications, especially when dealing with complex data dependencies and side effects. This exercise will test your understanding of Vue's watch API and how to effectively handle changing data within a reactive context.

Problem Description

You need to create a Vue component that utilizes the watch API to monitor two variables: firstName and lastName. When either firstName or lastName changes, a callback function should be executed. This callback function should receive both firstName and lastName as arguments, regardless of which variable triggered the change. The callback should then concatenate the two names and display the resulting full name in a designated element within the component.

Key Requirements:

• The component must have two reactive data properties: firstName and lastName, initialized to empty strings.
• A watch function must be defined to monitor both firstName and lastName.
• The callback function within the watch function must accept both firstName and lastName as arguments.
• The callback function must concatenate firstName and lastName with a space in between.
• The concatenated full name must be displayed in an element with the ID "fullNameDisplay".
• The component should include input fields for firstName and lastName allowing the user to modify the values.

Expected Behavior:

• Initially, the "fullNameDisplay" element should show an empty string.
• When the user enters a value into the firstName input, the callback should execute, concatenating the (currently empty) lastName with the new firstName, and displaying the result in "fullNameDisplay".
• Similarly, when the user enters a value into the lastName input, the callback should execute, concatenating the (currently empty) firstName with the new lastName, and displaying the result in "fullNameDisplay".
• If both firstName and lastName are updated, the callback should execute with the latest values of both variables, displaying the correct full name.

Edge Cases to Consider:

• Empty strings for either firstName or lastName.
• Rapid changes in either firstName or lastName (ensure the callback handles this smoothly).
• Initial values of firstName and lastName before any user input.

Examples

Example 1:

Input: firstName = "John", lastName = ""
Output: fullNameDisplay shows "John"
Explanation: The callback concatenates "John" and "" resulting in "John".

Example 2:

Input: firstName = "", lastName = "Doe"
Output: fullNameDisplay shows "Doe"
Explanation: The callback concatenates "" and "Doe" resulting in "Doe".

Example 3:

Input: firstName = "John", lastName = "Doe"
Output: fullNameDisplay shows "John Doe"
Explanation: The callback concatenates "John" and "Doe" resulting in "John Doe".

Constraints

• The solution must be written in TypeScript.
• The component must be a single-file Vue component (.vue file).
• The solution should be efficient and avoid unnecessary re-renders.
• The component should be easily understandable and maintainable.
• The solution must use Vue 3's Composition API.

Notes

• Consider using ref from Vue to create reactive variables.
• The watch function's options object can be used to specify which variables to watch and how to handle changes.
• Think about how to handle the order of execution when both firstName and lastName change simultaneously. The callback should always receive the latest values.
• Focus on creating a clean and readable solution that adheres to Vue best practices.