Reactive debounced ref for handling user input (search, filters) without excessive API calls.

use-debounced-ref.ts

export function useDebouncedRef<T>(value: T, delay = 300) {
  const state = ref(value)
  const debounced = ref(value)

  let timer: any

  watch(state, (val) => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      debounced.value = val
    }, delay)
  })

  return { state, debounced }
}

Use case:

const { state: search, debounced } = useDebouncedRef('', 300)

watch(debounced, (q) => {
  // fire API request
})