page.vue

<script lang="ts" setup>
import { useAsyncCookie } from '~/composables/useAsyncCookie';

const expires = new Date();
expires.setSeconds(5);

const testCookie = useAsyncCookie('test', { maxAge: 5 });
testCookie.value = 'sometext';

const c = useCookie('xxtest', { maxAge: 5 });
c.value = '10000';

const lazyVal = ref('');

onMounted(() => {
  setTimeout(() => {
    console.log('>> timeout');
    lazyVal.value = testCookie.value;
  }, 7000);
});
</script>

<template>
  <div>
    <strong>Original value: </strong> {{ testCookie }} <br />
    <strong>Value after expired: </strong> {{ lazyVal }}
  </div>
</template>

useSyncedCookie.ts

import { CookieOptions } from 'nuxt/app';

function getCookie(name: string) {
  const value = process.server
    ? useRequestHeaders(['cookie']).cookie
    : `; ${document?.cookie}`;

  console.log('getCookie()', value);
  if (!value) return undefined;

  const parts = value.split(`; ${name}=`);
  console.log('parts', parts);
  if (parts.length === 2) return parts.pop()?.split(';').shift();
}

export function useSyncedCookie(name: string, options?: CookieOptions) {
  const cookie = useCookie(name, options);

  return customRef((track, trigger) => {
    return {
      get() {
        const value = getCookie(name);
        return value;
      },

      set(newValue) {
        cookie.value = newValue;
      },
    };
  });
}
composables/useAsyncCookie.ts