Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Fix #3381 does not fix #3343: watch() returns the ref, not the value, so setup() never re-runs

Open Beginner friendly
  • Is something wrong?
#3,389 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
86/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
javascript
Domain
frontend

Research direction

Start in src/components/SearchResults.vue and inspect the routingDefinition watcher, then review src/router/index.ts to understand how category and tag route changes reuse the component. Reproduce the navigation from category A to category B without reloading, and verify that the displayed recipes update to the selected category.

Written by the indexing model from the issue text.

Description

Description
PR #3381 closed #3343, but the watcher it introduced can never fire. The symptom
of #3343 ("category/tag navigation shows the previously selected category")
is therefore still reproducible on current master.

Root cause

src/components/SearchResults.vue:

const routingDefinition = computed(() => ({
    value: route.params.value,
    type: props.query,
}));

watch(
    () => routingDefinition,
    (newValue, oldValue) => {
        setup();
    },
    {
        deep: true,
    },
);

The watch source is a getter function, so watch calls it and uses the
return value as the watched value. Here that return value is the
ComputedRef object itself, not routingDefinition.value. Three consequences:

  1. The returned ref object is a constant reference and is never replaced, so
    hasChanged(newValue, oldValue) is always false and the callback never runs.
  2. The getter body never reads route.params.value or props.query, so no
    reactive dependency is tracked at all. deep: true does not help — it only
    affects traversal of the values passed to the callback, not whether the
    effect re-runs.
  3. setup() is therefore only ever called from onMounted.

Since /category/:value and /tags/:value reuse the same Search component
instance (src/router/index.ts), the component is not re-mounted on a param
change and the list keeps showing the previously loaded category.

Suggested fix

Pass the computed ref directly, so Vue tracks the dependencies evaluated inside
it:

 watch(
-    () => routingDefinition,
+    routingDefinition,
     (newValue, oldValue) => {
         setup();
     },
-    {
-        deep: true,
-    },
 );

deep: true is no longer required: the computed returns a fresh object
whenever route.params.value changes, which is a change Vue detects without
deep traversal.

An alternative that also works, and avoids reading the parameter from a
reactive route inside the guard, is to pass the target route into setup():

const setup = async (r = route) => { /* const cat = r.params.value; ... */ };

onBeforeRouteUpdate((to, from, next) => {
    next();
    setup(to);
});

Note that onBeforeRouteUpdate is currently still imported in this file but
unused, so the first option keeps the diff minimal.

Reproduction

  1. Open Cookbook, click category A in the left navigation → list shows A.
  2. Click category B → list still shows the recipes of A, URL reads
    #/category/B.
  3. Press F5 → B is shown.

Expected behavior
The list shows the recipes of the category just clicked.

Actual behavior
The list lags one navigation behind; a reload is required.

Versions
Nextcloud server: see reporter's setup
Cookbook: 0.11.10 and current master (PR #3381, merged 2026-09-25)

Dominant language
HTML
Stars
642
Forks
113
Avg merge
1d 3h
Merged PRs (30d)
47

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from nextcloud/cookbook

All issues in nextcloud/cookbook

Similar issues

More Web Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.