useCookie doesn't write new value in cookies storage if composable used in multiple components

[evgenii-code]

Environment

• Operating System: Windows_NT
• Node Version: v18.18.2
• Nuxt Version: 2.17.2
• CLI Version: 3.10.0
• Nitro Version: 2.8.0
• Package Manager: npm@9.8.1
• Builder: webpack
• User Config: bridge, head, css, plugins, components, modules, build, serverHandlers, devServerHandlers, devServer, typescript, nitro, buildModules
• Runtime Modules: -
• Build Modules: (), @nuxt/bridge@3.0.0-rc.3-28343365.3c40b3f

Reproduction

https://github.com/evgenii-code/nuxt-bridge-use-cookies

// install dependencies
npm i

// run dev server
npm run dev

Describe the bug

We have page with one component that uses multiple times.
Each component uses useCookies composable to read and write values to cookie storage with the same cookie's name.

useCookie doesn't write new value in cookies storage if composable used in multiple components.

First usage of component:

<script setup>
const foo = useCookie('foo')

const setCookie1 = () => (foo.value = '1');
</script>

Second usage of component

<script setup>
const foo = useCookie('foo')

const setCookie2 = () => (foo.value = '2');
</script>

If we run methods in that order: setCookie1, setCookie2 and setCookie1 again, then cookie value in browser's storage stays '2', but should be '1'.

Here is a little video to show of this behaviour
https://imgur.com/gUjDhcc

Code of the component

<template>
  <div>
    <h2>Component {{ id }}</h2>

    <button @click="setCookie">Set cookie to {{ id }}</button>

    <p>{{ `${foo}` }}</p>
  </div>
</template>

<script setup lang="ts">
import { toRefs } from 'vue'
import { useCookie } from '#imports'

const props = defineProps({
  id: {
    type: String,
    required: true,
  },
})

const { id } = toRefs(props)

const foo = useCookie<string | undefined>('foo')

const setCookie = () => (foo.value = id.value)
</script>

Code of the page

<template>
  <div>
    <h1>Bug with useCookie</h1>

    <base-foo id="1" key="1" />

    <base-foo id="2" key="2" />
  </div>
</template>

<script lang="ts">
import { defineNuxtComponent } from '#imports'
import BaseFoo from '~/components/BaseFoo.vue'

export default defineNuxtComponent({
  name: 'PageCookies',

  components: {
    BaseFoo,
  },
})
</script>

Additional context

No response

Logs

No response

[evgenii-code]

I have figured that when I use useCookie multiple times it creates local reactive state every time.
And when I click setCookie1 after setCookie2 then basically watch inside useCookie doesn't trigger, because the value of foo remains the same in that local reactive state.

This behavior was not clear from the docs. Perhaps we should add this info.

Another idea is to add listeners for browser's cookies events that will trigger reactive updates of the useCookie. That would be a nice feature.

[wattanx]

Fixed at #988.
https://stackblitz.com/edit/github-gmtfgt