Deeply Nested Reactive Objects

Demonstrate Vue 3's reactive system's ability to observe deeply nested objects by creating and modifying such an object and logging the reactivity.

<div id='app'>{{ nestedObject }}</div>

This is the HTML template where Vue will render the reactive nested object.

<script src='https://unpkg.com/vue@next'></script>

We include Vue 3 from a CDN.

const { createApp, reactive } = Vue;

We are destructuring 'createApp' and 'reactive' from the Vue global object to use Vue 3's Composition API.

const App = {
  setup() {
    const nestedObject = reactive({
      level1: {
        level2: {
          value: 'Initial Value'
        }
      }
    });

    console.log('Original:', nestedObject);

    setTimeout(() => {
      nestedObject.level1.level2.value = 'Updated Value';
      console.log('Updated:', nestedObject);
    }, 2000);

    return { nestedObject };
  }
};

We define a Vue component using the Composition API. A reactive nested object is created using 'reactive'. We log the original object and, after a delay, update a deep property and log the result to show reactivity.

createApp(App).mount('#app');

We mount the Vue application to the DOM.

body { font-family: Arial, sans-serif; }

Basic CSS to style the font-family for the HTML content.