gistfile1.txt

import { ref, watch, readonly } from 'vue';
export const useRefDebounced = (aRef, ms) => {
  const debouncedRef = ref(aRef.value);
  // use the debounce function defined below to return a debounced ref whose value only syncs with `aRef` after `ms` milliseconds

  const debouncedUpdate = debounce(() => {
    debouncedRef.value = aRef.value;
  }, ms);

  watch(aRef, debouncedUpdate);

  return readonly(debouncedRef);
};

function debounce(func, delay) {
  let timeoutId;

  return function () {
    const context = this;
    const args = arguments;

    clearTimeout(timeoutId);

    timeoutId = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}