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=''></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.
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.