can not use router.push() in composable and utils directory

I tried to use useRouter() in composables directory and utils directory.

in composable directory

import { useRouter } from 'vue-router';

const router = useRouter()

export function navigateTo(url: string) {
  router.push(url)
}

in utils directory

import { useRouter } from 'vue-router';

const router = useRouter()

export function navigateTo(url: string) {
  router.push(url)
}

but it throws a undefined Error when I call navigateTo function in component 。

I create a mini repository here : https://github.com/weisiqian/nuxt3-app.git

_Originally posted by @weisiqian in https://github.com/nuxt/framework/discussions/1749#discussioncomment-1598478_

[weisiqian]

thank you @danielroe

[danielroe]

import { useRouter } from 'vue-router';

export function useNavigation() {
  const router = useRouter()
  function navigateTo(url: string) {
    router.push(url)
  }
  return { navigateTo }
}