JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
  <room-component/>
</div>

CSS

#app {
  min-height: 200px;
  padding: 20px 4px;
  margin: 10px 4px;
}

div {
  border: 1px solid #000;
  padding: 12px;
}


label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

#light {
  margin: 10px;
  border-radius: 8px;
}

#sofa {
  margin: 0px 40px;
  padding: 20px;
}

JavaScript

const LightComponent = Vue.defineComponent({
  setup() { console.log("Light setup") },
  props: { on: { type: Boolean } },
  template: `
    <div id="light">
      {{ on ? 'LIGHTS ON' : 'LIGHTS OFF' }} @ {{new Date().toISOString()}}
    </div>  
  `
})

const OccupantComponent = Vue.defineComponent({
  setup() { console.log("Occupant setup") },
  props: { name: { type: String } },
  template: `
    <div id="occupant">
      Occupied by: {{ name }} @ {{ new Date().toISOString() }}
    </div>
  `
})

const SofaComponent = Vue.defineComponent({
  setup() { console.log("Sofa setup") },
  props: { name: { type: String } },  
  template: `
    <div id="sofa">
      <label>Sofa {{ new Date().toISOString() }}</label>
      <occupant-component :name="name" />
    </div>
  `
})

const CarpetComponent = Vue.defineComponent({
  setup() { console.log("Carpet setup") },
  props: { player: { type: String } },
  template: `
    <div id="carpet">
      <label>Carpet</label>
      <sofa-component :name="player" />
    </div>
  `
})

const RoomComponent = Vue.defineComponent({
  setup() {
    console.log("Room setup")
  
    const lightSwitchOn = Vue.ref(false)
    const occupant = Vue.ref("Jeff")    
    
    const musicalChairs = () => {
      const players = ["Adam", "Jeff", "Steve", "Marie", "Ling", "Krish"]
      const index = Math.floor(Math.random(0) * 5)
      occupant.value = players[index]
    }    
  
    return {
      lightSwitchOn,
      occupant,
      musicalChairs
    }
  },
  template: `
    <div id="room">
      <label>Room</label>
      <button @click="lightSwitchOn = !lightSwitchOn">SWITCH</button>
      <button @click="musicalChairs">MUSIC!</button>      
      <light-component :on="lightSwitchOn"/>
      <carpet-component :player="occupant" />    
    </div>
  `
})

// 👇 Create and mount the app
const app = Vue.createApp({});

app.component('RoomComponent', RoomComponent) // 👈 Register our component
app.component('LightComponent',...