Managing page transition state in Nuxt

Hello,

I found a Nuxt app example using GSAP that attempts to implement a hook after a page transition, with a shared ref across the whole application.
The idea is to have something like a lifecycle hook similar to 'page:transition:finish' (onAfterLeave event) but instead with 'page:transition:after' (onAfterEnter event).
GSAP Page Transitions example: https://stackblitz.com/edit/nuxt-starter-bthjlg?file=composables%2Ftransition-composable.js

The GSAP dev implemented a composable like this:

const transitionState = reactive({
  transitionComplete: false,
});

export const useTransitionComposable = () => {
  const toggleTransitionComplete = (value) => {
    transitionState.transitionComplete = value;
  };

  return {
    transitionState,
    toggleTransitionComplete,
  };
}

If I understand the Nuxt documentation correctly (https://nuxt.com/docs/getting-started/state-management), this approach should be avoided.

First question:
Is this behavior the same across all rendering modes? (SWR, ISR, SSR, SSG, SPA)

Second question:
Following the documentation, I ended up with a composable like this:

const useTransitionCompleteState = () => useState<boolean>('isTransitionComplete', () => shallowRef(false))
export default = () => {
  const isTransitionComplete = useTransitionCompleteState()
  const toggleTransitionComplete = (value: boolean) => {
    isTransitionComplete.value = value
  };

  return {
    transitionState: readonly(isTransitionComplete),
    toggleTransitionComplete,
  }
}

Last question:
The following implementation is more concise and works on my end. Is it a good approach, or does it introduce issues? What’s the difference?

export default = () => {
  const isTransitionComplete = useState<boolean>('isTransitionComplete', () => shallowRef(false))
  const toggleTransitionComplete = (value: boolean) => {
    isTransitionComplete.value = value
  }

  return {
    transitionState: readonly(isTransitionComplete),
    toggleTransitionComplete,
  }
}

Thanks in advance for your help! :)

Start with the Nuxt state-management documentation and the linked GSAP Page Transitions example, then compare the two composable implementations described in the issue. Clarify their behavior across SWR, ISR, SSR, SSG, and SPA modes, and document which approach is recommended and why.