Reactive Object Management in Vue with TypeScript

This challenge focuses on creating a Vue component that manages a reactive object, allowing users to modify its properties and observe those changes in real-time. Understanding how to create and manage reactive data is fundamental to Vue development, and this exercise will solidify your knowledge of Vue's reactivity system, especially when combined with TypeScript for type safety.

Problem Description

You are tasked with building a Vue component that displays and allows modification of a pre-defined object. The object will have several properties, each with a specific data type. The component should:

1. Initialize with a reactive object: The component should be initialized with a predefined object containing properties like name (string), age (number), isActive (boolean), and address (object with street (string) and city (string) properties).
2. Display object properties: The component should display the values of all properties of the object in a user-friendly format (e.g., using <div> elements or a table).
3. Provide input fields for modification: For each property, the component should provide an appropriate input field (e.g., <input type="text"> for strings, <input type="number"> for numbers, <input type="checkbox"> for booleans).
4. Update the object reactively: When a user modifies a value in an input field, the corresponding property of the object should be updated reactively. This means that any other part of the component (or other components that depend on this object) should automatically reflect the changes.
5. Handle object property updates: The component should correctly handle updates to nested object properties (e.g., address.street).

Expected Behavior:

• The component should render correctly on initial load, displaying the initial values of the object's properties.
• When a user changes a value in an input field, the corresponding property of the object should be updated immediately.
• The displayed values should update in real-time to reflect the changes in the object.
• The component should be type-safe, preventing errors due to incorrect data types.

Examples

Example 1:

Input: Initial object: { name: "Alice", age: 30, isActive: true, address: { street: "123 Main St", city: "Anytown" } }
Output:  A Vue component displaying the object's properties with corresponding input fields.  Changing the "age" input to "31" should update the displayed age to "31".
Explanation: The component uses Vue's reactivity system to track changes to the object and update the UI accordingly.

Example 2:

Input: Initial object: { name: "Bob", age: 25, isActive: false, address: { street: "456 Oak Ave", city: "Springfield" } }
Output: A Vue component displaying the object's properties with corresponding input fields. Changing the "address.city" input to "Shelbyville" should update the displayed city to "Shelbyville".
Explanation:  Nested object properties are also reactive and can be modified through input fields.

Example 3: (Edge Case - Empty Object)

Input: Initial object: {}
Output: A Vue component displaying no properties. No errors should be thrown.
Explanation: The component should gracefully handle an empty initial object.

Constraints

• The component must be written in Vue 3 with TypeScript.
• Use Vue's reactivity system (e.g., ref, reactive) to manage the object's state.
• The component should be well-structured and easy to understand.
• The component should handle at least the following properties: name (string), age (number), isActive (boolean), and address (object with street (string) and city (string) properties).
• The component should not use external libraries beyond Vue and TypeScript.

Notes

• Consider using v-model for two-way data binding between the input fields and the object's properties.
• Think about how to handle different data types when creating the input fields (e.g., using different input types for strings, numbers, and booleans).
• Pay close attention to the reactivity system and ensure that changes to the object are properly tracked and reflected in the UI.
• Type safety is crucial. Ensure your TypeScript code is well-typed and prevents potential errors.
• You can use a simple template structure for displaying the properties and input fields. The focus is on reactivity and data management.