vue-routerで画面遷移したい

Question

前提

viteでWebアプリのフロントを実装しています。
画面遷移の機能を実装中に以下のエラーメッセージが発生しました。

実現したいこと

ボタンを押したときに、特定の処理を実行した後、任意の画面に遷移させたいです。

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

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

該当のソースコード

<script setup lang="ts">
import { reactive } from "vue";
import { signIn, signOut } from "../auth";
import { useRouter } from "vue-router";
const state = reactive({
  username: "",
  password: "",
});

const clickSignInButton = async () => {
  try {
    const resultSignIn = await signIn(state.username, state.password);
    alert("OK!!!");
    console.log("[resultSignIn]", resultSignIn);

    const router = useRouter();
    const moveNextScreen = () => {
      router.push("/Main");
    };

    moveNextScreen();

  } catch (error) {
    console.log("[signinError]", error);
    alert(`NG:${error}`);
  }
};

</script>

<button @click="clickSignInButton">ログイン</button>

試したこと

Vue.jsのVue Routerを使用してプログラムで画面遷移する方法！の「Compotion APIでURLを指定して遷移する」を参考に、下記コードを書いてみたら特に反応がなかったので、上記コードに直したらエラーが出ました。

<script setup lang="ts">
import { reactive } from "vue";
import { signIn, signOut } from "../auth";
import { useRouter } from "vue-router";
const state = reactive({
  username: "",
  password: "",
});

const clickSignInButton = async () => {
  try {
    const resultSignIn = await signIn(state.username, state.password);
    alert("OK!!!");
    console.log("[resultSignIn]", resultSignIn);

    const router = useRouter();
    const moveNextScreen = () => {
      router.push("/Main");
    };

    return {
      moveNextScreen,
    };
  } catch (error) {
    console.log("[signinError]", error);
    alert(`NG:${error}`);
  }
};
</script>

以下のパターンも試してみましたが、エラー内容は変わらずでした。

<script setup lang="ts">
import { reactive } from "vue";
import { signIn, signOut } from "../auth";
import { useRouter } from "vue-router";
const state = reactive({
  username: "",
  password: "",
});

const clickSignInButton = async () => {
  try {
    const resultSignIn = await signIn(state.username, state.password);
    alert("OK!!!");
    console.log("[resultSignIn]", resultSignIn);

    const router = useRouter();
    router.push("/Main");

  } catch (error) {
    console.log("[signinError]", error);
    alert(`NG:${error}`);
  }
};
</script>

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

typescript: 4.5.4
vite: 2.8.0
vue: 3.2.25
@vitejs/pluhin-vue: 2.2.0
vue-router: 4.0.14

Answer 1

ログイン処理が書かれた関数の外でuseRouter()を定義したらいけました。

<script setup lang="ts">
import { reactive } from "vue";
import { signIn } from "../auth";
import Header from "./Header.vue";
import { useRouter } from "vue-router";
const state = reactive({
  username: "",
  password: "",
});
const router = useRouter();

const clickSignInButton = async () => {
  try {
    const resultSignIn = await signIn(state.username, state.password);
    alert("OK!!!");
    console.log("[resultSignIn]", resultSignIn);

    router.push("/Main");
  } catch (error) {
    console.log("[signinError]", error);
    alert(`NG:${error}`);
  }
};
</script>