<template>
  <h1>Lifecycle Hook 'beforeMount' Example</h1>
  <p ref="pEl">Using the 'beforeMount' and 'mounted' lifecycle hooks to demonstrate that the component's DOM elements are not available until the 'mounted' hook.</p>
  <p>beforeMount: <span>{{ refsObj1 }}</span></p>
  <p>mounted: <span>{{ refsObj2 }}</span></p>
</template>

<script>
export default {
  data() {
    return {
      refsObj1: '',
      refsObj2: ''
    }
  },
  beforeMount() {
    this.refsObj1 = this.$refs; // The $refs object is empty at this point
  },
  mounted() {
    this.refsObj2 = this.$refs;
  }
}
</script>

<style scoped>
span {
  background-color: lightgreen;
}
</style>                  

import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)
app.mount('#app')