<template> <h1>The 'deactivated' Lifecycle Hook</h1> <p>Using the 'deactivated' hook to log when the 'deactivated' hook is called.</p> <button @click="this.activeComp = !this.activeComp">Include component</button> <div> <KeepAlive> <comp-one v-if="activeComp"></comp-one> </KeepAlive> </div> </template> <script> export default { data() { return { activeComp: false } } } </script> <style scoped> div { border: dashed black 1px; border-radius: 10px; padding: 20px; margin-top: 10px; background-color: lightgreen; } </style>

 <template> <h2>Component</h2> <p>Below is a log with every time the 'deactivated' hook runs.</p> <ol> <li v-for="x in hookLog">{{ x }}</li> </ol> <p>You can also see when the 'deactivated' hook runs in the console.</p> </template> <script> export default { data() { return { hookLog: [] } }, deactivated() { console.log("deactivated") this.hookLog.push("deactivated"); } } </script> <style> li { background-color: lightcoral; width: 5em; } </style>

 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')