<MyButton class="big red" id="super-btn" />

<!-- Внутри MyButton.vue -->
<template>
  <button>Нажми</button>
</template>

<template>
 <div>
   <button>Жмек-с</buitton>
   <button v-bind="$attrs">Жмак</button>
 </div>
</template>

<template>
  <div class="wrapper">
    <button v-bind="$attrs">Кнопка</button>
  </div>
</template>

<script setup>
defineOptions({
  inheritAttrs: false
})
</script>

<KeepAlive>
  <component :is="currentTabComponent" />
</KeepAlive>

<!-- строка, разделённая запятыми -->
<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>

<!-- регулярное выражение (используйте `v-bind`) -->
<KeepAlive :include="/a|b/">
  <component :is="view" />
</KeepAlive>

<!-- массив (используйте `v-bind`) -->
<KeepAlive :include="['a', 'b']">
  <component :is="view" />
</KeepAlive>

<KeepAlive :max="2">
  <component :is="currentTabComponent" />
</KeepAlive>

onActivated(() => {
  console.log('Я снова в деле!');
});

onDeactivated(() => {
  console.log('Пошёл отдыхать');
});

<script setup>
import { ref, onRenderTracked, onRenderTriggered } from 'vue';

const count = ref(0);
const name = ref('Vue');

onRenderTracked((e) => {
  console.log('[tracked]', e);
});

onRenderTriggered((e) => {
  console.log('[triggered]', e);
});
</script>

<template>
  <div>
    <p>Счётчик: {{ count }}</p>
    <p>Имя: {{ name }}</p>
    <button @click="count++">+1</button>
  </div>
</template>

[triggered] { target: ..., key: "count", type: "set" }

onRenderTracked((e) => {
  console.table({
    key: e.key,
    type: e.type,
    target: e.target
  });
});