Vue 3 Reactive Object Creation

This challenge focuses on understanding and implementing Vue 3's reactivity system. You'll learn how to create and manage reactive data structures within a Vue component, which is fundamental for building dynamic and interactive user interfaces.

Problem Description

Your task is to create a reactive object in a Vue 3 component using TypeScript. This object will hold several properties, and changes to these properties should automatically trigger updates in the component's template.

Key Requirements:

1. Define a Reactive Object: Create a TypeScript interface or type for your data structure. Then, use Vue 3's reactive API to make an instance of this data structure reactive.
2. Display Reactive Data: Render the properties of the reactive object in the Vue component's template.
3. Update Reactive Data: Implement a mechanism (e.g., a button click) to modify one or more properties of the reactive object.
4. Observe Reactivity: Ensure that when the reactive data is updated, the corresponding parts of the template automatically re-render without manual intervention.

Expected Behavior:

The component should display the initial values of the reactive object's properties. When an action is taken to update these properties, the displayed values in the template should reflect the changes immediately.

Edge Cases to Consider:

• Handling nested objects within the reactive object.
• Modifying properties that don't exist initially (though the reactive API generally handles this well for plain objects).

Examples

Example 1:

Input: A Vue component setup with the following data structure:

interface UserProfile {
  name: string;
  age: number;
  isOnline: boolean;
}

Initial values:

const user = { name: "Alice", age: 30, isOnline: false };

A button to toggle isOnline.

Output: The template initially displays: "Name: Alice, Age: 30, Online: No"

When the button is clicked, the template updates to: "Name: Alice, Age: 30, Online: Yes"

Explanation: The user object is made reactive. The template displays its properties. Clicking the button modifies user.isOnline, and Vue automatically updates the displayed "Online" status.

Example 2:

Input: A Vue component with a reactive object representing a product:

interface Product {
  id: number;
  name: string;
  price: {
    amount: number;
    currency: string;
  };
}

Initial values:

const product = {
  id: 1,
  name: "Laptop",
  price: {
    amount: 1200,
    currency: "USD"
  }
};

A function to increase the amount by 100.

Output: The template initially displays: "Product: Laptop, Price: 1200 USD"

After calling the update function, the template displays: "Product: Laptop, Price: 1300 USD"

Explanation: The nested price object is also reactive because the parent product object is reactive. Modifying product.price.amount correctly updates the displayed price.

Constraints

• Use Vue 3 Composition API with TypeScript.
• The reactive object should be created using Vue's reactive API.
• Avoid using the Options API for data declaration.
• The solution should be a single .vue file component.

Notes

• The reactive API is designed for plain JavaScript objects. Primitive values (strings, numbers, booleans, etc.) are not directly reactive when created with reactive. If you need reactive primitives, consider using ref.
• Think about how to expose your reactive object and any functions that modify it to the template. The setup function in the Composition API is where you'll do this.
• For nested objects, Vue's reactive automatically makes them reactive as well.