The Complete Production SOP: How to Deploy and Run Vue 3 Composition API & Fine-Grained Reactivity in Autonomous AI Agents

---
name: "vue-3-composition-api-reactivity"
description: "Build modular Vue 3 components with ref, reactive, computed, and custom composables."
metadata:
  author: "Evan You"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "write vue 3 composition api"
  - "create vue 3 composable"
  - "watch vs watcheffect vue 3"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "strict": true,
    "jsx": "preserve",
    "skipLibCheck": true
  }
}

import { ref, watch, type Ref } from 'vue';

export interface UseDebouncedSearchOptions<T> {
  fetcher: (query: string, signal: AbortSignal) => Promise<T[]>;
  debounceMs?: number;
}

export function useDebouncedSearch<T>(
  query: Ref<string>,
  options: UseDebouncedSearchOptions<T>
) {
  const results: Ref<T[]> = ref([]);
  const isLoading = ref<boolean>(false);
  const error = ref<Error | null>(null);

  let timeoutId: ReturnType<typeof setTimeout> | null = null;
  let abortController: AbortController | null = null;

  watch(
    query,
    (newQuery) => {
      if (timeoutId) clearTimeout(timeoutId);
      if (abortController) abortController.abort();

      if (!newQuery.trim()) {
        results.value = [];
        isLoading.value = false;
        return;
      }

      isLoading.value = true;
      error.value = null;

      timeoutId = setTimeout(async () => {
        abortController = new AbortController();
        try {
          results.value = await options.fetcher(newQuery, abortController.signal);
        } catch (err: unknown) {
          if ((err as Error).name !== 'AbortError') {
            error.value = err instanceof Error ? err : new Error(String(err));
          }
        } finally {
          isLoading.value = false;
        }
      }, options.debounceMs ?? 300);
    },
    { immediate: false }
  );

  return {
    results,
    isLoading,
    error
  };
}

{
  "scripts": {
    "type-check": "vue-tsc --build --force",
    "lint": "eslint src/ --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  }
}