Cancel and invalidate Vue watcher requests before the next await

A tenant selection can change while an older query is still in flight. A watcher cleanup belongs to that invocation, so it can stop and invalidate exactly the work the next invocation supersedes. The onCleanup argument also works where onWatcherCleanup is unavailable.

Save this requirement in Perch and check it after each agent edit. The rule gives your agent a named check to run, a finding to repair, and the same command to recheck.

Implement the Vue boundary

Save this illustrative integration module as src/useOrders.js.

import { ref, watch } from "vue";

export function useOrders(tenantId) {
  const orders = ref([]);
  const error = ref(null);
  watch(tenantId, (id, _oldId, onCleanup) => {
    const controller = new AbortController();
    let obsolete = false;
    onCleanup(() => { obsolete = true; controller.abort(); });
    orders.value = [];
    error.value = null;
    fetch(`/api/tenants/${encodeURIComponent(id)}/orders`, {signal:controller.signal})
      .then(response => { if (!response.ok) throw new Error("Fetch failed"); return response.json(); })
      .then(value => { if (!obsolete) orders.value = value; })
      .catch(failure => { if (!obsolete && failure.name !== "AbortError") error.value = failure; });
  }, {immediate:true});
  return {orders,error};
}

The order, inventory, or resource-lifetime scenario is adapted from Perch’s public order-service source at commit 4af67af. This Vue implementation is an illustrative adaptation.

Integrate with your application

Pass tenantId as a ref, computed ref, or reactive getter, not a plain string. Call the composable synchronously inside setup so Vue owns its watcher lifetime. The API must independently enforce tenant membership; a route parameter is a requested scope, not proof of access. The example clears previous data when tenant changes and ignores old completion/errors. If a fetch wrapper caches responses, its cache key also needs the tenant and authorization boundary.

Exercise the boundary and failure paths

Add regression tests for these cases in your existing Vue test project. Use separate connections or deliberately reordered completion where the case involves concurrency; a sequential happy-path test does not exercise that failure. Run the test command after creating the matching test file or suite:

npx vitest run src/useOrders.test.js

The scenarios above specify tests to implement. A completed Perch source check below is separate from running these application integration tests.

Introduce the specific agent regression

In a throwaway copy, replace this source span:

onCleanup(() => { obsolete = true; controller.abort(); });

with:

// Remove the source span shown above.

Run the relevant negative test and the Perch command on that broken copy. Restore the corrected source before committing the application. The supplied mutation reproduces the exact regression for the rule check.

Preserve the requirement as a Perch rule

Save this in .perch/rules/perch-guide-vue-watcher-cancellation.yaml at the repository root, keeping your existing perch.yaml:

- name: watcher-registers-cleanup
  where: "src/useOrders.js"
  ensure: >-
    The tenant watcher must register onCleanup to abort its request and mark its results obsolete before starting asynchronous completion handlers.

Install and authenticate the CLI once, then check the current working file:

npm install -g @lakeday/perch
perch login
perch check src/useOrders.js --rules watcher-registers-cleanup --json

Use Node 22 or newer. The framework can use another language; Perch’s CLI remains a Node command. A gated finding exits 3. Exits 1 or 2 mean the check did not complete and must be reported as a blocker.

Inspect the captured rule check

On 2026-10-14, Perch using jev-latest checked the exact fixed and broken source provided here. The capture records SHA-256 hashes of both sources and the requirement.

The rule distinguished these controls in this run. Raw Perch capture · Exact sources and mutation.

Install the rule pack and configure your agent

Download this rule pack ZIP · Download the YAML rules · Agent task. The pack contains the rule, its example paths and the repair/recheck instructions. Review the where selector before using it in an existing project. Keep your root perch.yaml; install this rule as a separate file under .perch/rules/.

1. Install Perch using Node 22 or newer and sign in once:

npm install -g @lakeday/perch
perch login

2. Download the pack, inspect it, and extract it from your repository root. The extraction preserves any existing files:

curl -fL 'https://frameworkrecipes.dev/vue/watcher-cancellation/rule-pack.zip' -o 'perch-guide-vue-watcher-cancellation.zip'
unzip -n 'perch-guide-vue-watcher-cancellation.zip'

The installed rule is .perch/rules/perch-guide-vue-watcher-cancellation.yaml. Its selector matches src/useOrders.js in this example; adapt the selector to your application file before checking an existing project.

3. Configure the coding agent you use. Run one of these commands:

Claude Code:

perch setup claude-code

Codex:

perch setup codex

Cursor:

perch setup cursor

Pi:

perch setup pi

4. Ask the agent to edit the implementation and check the saved requirement:

Use the installed Perch skill while editing src/useOrders.js. Preserve watcher-registers-cleanup. Run perch check src/useOrders.js --rules watcher-registers-cleanup --json after the edit. Read each finding and the affected code, fix the implementation, and run the identical check again after the fix. Keep the rule and regression tests intact. Run the application's relevant regression tests and report the commands and actual results. Exit 3 means a rule finding; exit 1 or 2 means the check did not complete. Report an unavailable or incomplete check as blocked. Do not claim the application tests ran if only the Perch check ran.

5. After repairing a finding, run the same check again and inspect the result:

perch check src/useOrders.js --rules watcher-registers-cleanup --json

Commit the downloaded rule and the installed agent configuration with your application. The rule file adds no guarantee of correctness; keep the regression tests from this guide.

With the base reference fetched, use perch scan --since origin/main --filter type=lint in CI.

Framework references and verification scope

• vuejs.org reference

The dated capture records the source check shown above. Implement the adapters, schema and regression tests described in this guide in your application. Unchanged requests reuse cached answers; fresh model judgments can vary. Model analysis sends relevant source to the configured service.