Make useUser() return reactive state

[irees]

Summary

useUser() currently returns a plain object snapshot of the auth state. If the underlying useState values (auth0_user, tlv2_user_roles, tlv2_user_id) change after the initial call, the returned object is stale.

This works today because auth-enrich runs as global route middleware, so the values are refreshed on every navigation. But components that call useUser() once and hold a reference won't see updates without a route change — e.g., if a background session refresh updates roles.

Proposed change

Return a computed (or reactive object with computed properties) so that consumers automatically see updates when the underlying state changes:

export const useUser = (): ComputedRef<TlUser> => {
  const auth0User = useAuth0User()
  const roles = useRoles()
  const graphqlId = useGraphqlId()

  return computed(() => ({
    loggedIn: !!auth0User.value,
    id: graphqlId.value || auth0User.value?.tlv2_id || auth0User.value?.sub || '',
    name: auth0User.value?.name || auth0User.value?.tlv2_name || '',
    email: auth0User.value?.email || auth0User.value?.tlv2_email || '',
    roles: roles.value,
    hasRole: (v: string) => roles.value.includes(v),
  }))
}

This is a breaking change to the return type (TlUser → ComputedRef<TlUser>), so it should be a minor or major version bump. Consumers would need to access properties via .value or use toRef/toRefs.

An alternative non-breaking approach is to return a reactive() wrapper, which preserves the current access pattern but adds reactivity.