<script setup>
import { ref, onMounted, onUpdated, onUnmounted } from 'vue'

const count = ref(0)

onMounted(() => {
  console.log('Component mounted, count starts at', count.value)
})

onUpdated(() => {
  console.log('DOM patched, count is now', count.value)
})

onUnmounted(() => {
  console.log('Component removed from the page')
})
</script>

<template>
  <button @click='count++'>Clicked {{ count }} times</button>
</template>