Environment

Reproduction

https://gist.github.com/ilyaDegtyarenko/050172b2e1c0e7586264022411874edd

Minimal app.vue, no config, no modules:

<script setup lang="ts">
const counter = useCookie<number>('counter', { maxAge: 3600, refresh: true })
const changeEvents = ref(0)

onMounted(() => {
  globalThis.cookieStore?.addEventListener('change', (event) => {
    if (event.changed.some(c => c.name === 'counter')) {
      changeEvents.value++
    }
  })
})
</script>

<template>
  <button @click="counter = (counter ?? 0) + 1">counter++</button>
  <p>cookieStore change events: {{ changeEvents }}</p>
</template>

1. Open the page in Chrome. The counter stays at 0 while idle.
2. Click the button once, or run cookieStore.set('counter', '1') in the console.
3. The counter climbs by about 12–21k per second and never stops until the page is reloaded.

Change events within 3 s of a single trigger:

Describe the bug

Since #36006 ("use native vue pausable watcher for useCookie", first released in 4.6.0), syncing a cookie change back into the ref writes the cookie again. With refresh: true this turns into an endless write → change → write loop:

1. A cookieStore change event calls handleChange, which runs cookieWatcher.pause(), assigns cookie.value, and calls nextTick(() => cookieWatcher.resume()).
2. With maxAge/expires, the cookie is a customRef whose setter always calls trigger(), even for an equal value.
3. Vue 3.5 does not drop a trigger that arrives while the effect is paused: it adds the effect to pausedQueueEffects and replays it on resume(). The watcher is deep by default, so the callback runs even though the value is unchanged.
4. The callback is callback(opts.refresh). With refresh: true it skips the isEqual check and writes document.cookie.
5. The write fires a new change event, which goes back to step 1.

Before #36006, handleChange set a watchPaused flag that made the watcher return early. The trigger was dropped rather than deferred, so 4.5.2 does not loop. With refresh: false, the replayed callback is stopped by isEqual, because handleChange already updated the snapshot.

Expected behaviour: a value received from a change event (or from the BroadcastChannel) is applied to the ref without writing the cookie back. refresh: true should only affect assignments made by the app.

Additional context

• Defaults are enough to hit it: experimental.cookieStore is true and watch is true. You only need refresh: true together with maxAge or expires.
• Impact in our production app: about 17k cookie writes per second on the main thread for as long as the component that owns the cookie stays mounted. A write from any same-origin tab starts the loop in every tab that has the cookie mounted.
• Not verified, from reading the code: object or array values may loop even without maxAge, because decode returns a new object on every event. The BroadcastChannel fallback (no Cookie Store API) may ping-pong between two tabs in the same way.
• A possible fix is to restore the pre-refactor(nuxt): use native vue pausable watcher for useCookie #36006 semantics in handleChange, so the watcher run caused by the sync is dropped instead of replayed on resume().

Logs

No response