Lifecycle

const { run } = useDebounceFn(() => search(query.value), 300)
watch(query, run)

const { run, cancel } = useDebounceFn(save, 500)

watch(filters, reload, { deep: true })

watch(box, reposition, { deep: true, flush: 'sync' })

useInterval(() => send(message.value), delay)

watch(() => getTargetElement(target), (el) => {
  if (el) observe(el)
})

const { isActive, pause, resume } = useInterval(() => {
  seconds.value += 1
}, 1000)

const isHydrated = useIsHydrated()

onMounted(() => {
  width.value = window.innerWidth
})

onMounted(() => {
  measure()
})

const { run } = useThrottleFn(() => persist(scroll.value), 200)
watch(scroll, run)

const { run } = useThrottleFn(onScroll, 200)

const { isPending, start, stop } = useTimeout(close, 3000)

onUnmounted(() => cleanup())

const count = ref(0)
count.value += 1 // tampilan ikut

watch(query, (next) => search(next))