Vue3 router.pushで画面遷移できない

Question

前提

vue初心者です。
vue3のcompoosition api でシステムを開発しています。

実現したいこと

ボタンを押したら、ページが変わる、単純な画面遷移をJS側で行いたいのですがうまくいきません。

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot read properties of undefined (reading 'push')

該当のソースコード

<template>

<AppButton
                    type="submit"
                    :disabled="!loginIndexForm.terms"
                    @click="onRegisterMailClick()"
                >

</template>

<script setup>
import { ref } from 'vue'
    import { RouterLink } from 'vue-router'
    import AppInput from '@/components/AppInput.vue'
    import AppCheckbox from '@/components/AppCheckbox.vue'
    import AppButton from '@/components/AppButton.vue'
    import { useRouter } from 'vue-router'
    import { onMounted } from '@vue/runtime-core'


const onRegisterMailClick = () => {
        const router = useRouter();
        
        router.push('/');
        }

</script>

試したこと

router.push('/'); 　で画面遷移できるかと思いますが、何かおかしいところがあるのでしょうか、、？

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

const router = useRouter();をonRegisterMailClick関数の外に出すと解決しました。