Deep Reactivity with Nested Objects

Demonstrate how Vue 3 handles reactivity in nested data objects using the `reactive` function from the Composition API.
    <div>User Profile:</div>
    <div>Name: {{ }}</div>
    <div>Email: {{ }}</div>
    <div>Address: {{ userProfile.address.street }}</div>
    <button @click="updateAddress">Update Address</button>

import { reactive, toRefs } from 'vue';
export default {
  setup() {
    // Using reactive to make the userProfile object deeply reactive
    const userProfile = reactive({
      name: 'Jane Doe',
      email: '',
      address: {
        street: '123 Main St',
        city: 'Anytown',
        zip: '12345'

    // Method to update a nested property
    function updateAddress() {
      userProfile.address.street = '456 Elm Street';

    // Expose to template
    return { ...toRefs(userProfile), updateAddress };
This Vue 3 component uses the Composition API to create deeply reactive data with nested objects. With the `reactive` function, changes to nested properties will still trigger reactivity and update the DOM when used in the template. The `toRefs` function is used to extract refs from the reactive object so they can be used directly in the template while maintaining reactivity. The `updateAddress` function demonstrates updating a nested property, which will automatically update the UI.
div {
  margin-bottom: 1rem;
button {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
This CSS styles the Vue component's divs and button, adding margins to the divs and styling the button to be more user-friendly with padding, font size adjustments, and a pointer cursor on hover.