.red {
  padding: 1rem;
  border: 3px solid red
}

.orange {
  padding: 1rem;
  border: 3px solid orange
}

.green {
  padding: 1rem;
  border: 3px solid green
}

.blue {
  padding: 1rem;
  border: 3px solid blue
}

const { createApp, ref } = Vue;

const app = createApp({
  setup() {
    const text = ref('Hello Ray.');
    
    return {
      text,
    }
  }
});

app.component('my-component-1', {
  template: `
    <div class="orange">
      <p>{{ text }}</p>
      <my-component-2></my-component-2>
    </div>
   `,
  setup() {
    const text = ref('Components - 1.');
    
    return {
      text,
    }
  }
})

app.component('my-component-2', {
  template: `
    <div class="blue">
      <p>{{ text }}</p>
      <my-component-3></my-component-3>
    </div>
   `,
  setup() {
    const text = ref('Components - 2.');
    
    return {
      text,
    }
  }
})

app.component('my-component-3', {
  template: `
   <div class="green">
    <p>{{ text }}</p>
   </div>
   `,
  setup() {
    const text = ref('Components - 3.');
    
    return {
      text,
    }
  }
})

app.mount('#app');