<script setup lang="ts">
// #region Props & Emits
const props = defineProps<{
  title: string
}>()

const emit = defineEmits<{
  (e: 'update', value: string): void
}>()
// #endregion

// #region State & Computed
// =============================
const count = ref(0)
const double = computed(() => count.value * 2)
// #endregion

// #region Lifecycle Hooks
onMounted(() => {
  // init code
  fetchData()
})
// #endregion

// #region Functions
async function fetchData() {
  console.log('fetched')
}
// #endregion region

// #region Utilities & event handlers
function increment() {
  count.value++
}
// #endregion

// #region Watchers
watch(count, (newVal, oldVal) => {
  console.log('count changed:', oldVal, '->', newVal)
})
// #endregion
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double: {{ double }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<style scoped>
/* component style */
</style>
