<template> <h1>The 'beforeUnmount' Lifecycle Hook</h1> <p>As we can see in the alert box, the text inside the p-tag is still accessible in the 'beforeUnmount' hook, right before the 'unmount' hook.</p> <button @click="this.activeComp = !this.activeComp">{{ btnText }}</button> <div> <comp-one v-if="activeComp"></comp-one> </div> </template> <script> export default { data() { return { activeComp: true } }, computed: { btnText() { if(this.activeComp) { return 'Remove component' } else { return 'Add component' } } } } </script> <style scoped> div { border: dashed black 1px; border-radius: 10px; padding: 20px; margin: 10px; width: 400px; background-color: lightgreen; } </style>

 <template> <h2>Component</h2> <p ref="pEl">Strawberries!</p> </template> <script> export default { beforeUnmount() { alert("beforeUnmount: The text inside the p-tag is: " + this.$refs.pEl.innerHTML); } } </script>

 import { createApp } from 'vue' import App from './App.vue' import CompOne from './components/CompOne.vue' const app = createApp(App) app.component('comp-one', CompOne) app.mount('#app')