`useCookie` state is stored independently

Environment

• Operating System: Darwin
• Node Version: v14.17.3
• Nuxt Version: 3.0.0
• Package Manager: yarn@3.1.1
• Bundler: Vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

Reproduction

<template>
  <div>
    <h1>
      {{ cookie2 }}
    </h1>
    <button @click="cookie1 = (Math.random() * 100).toFixed()">
      Change cookie
    </button>
  </div>
</template>

<script setup>
const cookie1 = useCookie('test')
const cookie2 = useCookie('test')
</script>

Describe the bug

Multiple invocations of useCookie are not synced, and so setting one will not trigger a change to others. This is not a bug per-se, but it’s inconsistent compared to useState, for example…

Additional context

No response

Logs

No response

[boboldehampsink]

This is the composable I created:

import { useCookie, useState, watch } from '#imports';

// Expires in a year
const expires = new Date();
expires.setTime(expires.getTime() + (365 * 24 * 60 * 60 * 1000));

// Make cookie use state across app
export default function useStatefulCookie(name) {
  const cookie = useCookie(name, { expires });
  const state = useState(name, () => cookie.value);

  watch(state, () => { cookie.value = state.value; }, { deep: true });

  return state;
}

[joshwcorbett]

Would be awesome to have useCookie behave similarly to useState but persisted in cookies