【vue.js】router-link内のv-on(@click)にてクリックイベントが発生しない

Question

前提・実現したいこと

現在ログイン機能の実装をしております。
ログイン状態に応じてヘッダーの中身を変えたいです。

ログイン前→　Loginボタン＆Registerボタン(新規登録画面へ遷移する)
ログイン中→　Logoutボタンのみ

しかし、今の実装ですとログアウトをしてもLogoutボタンが表示されており、ログアウトが正しく行われていないようです。
おそらくrouter-link内のv-on(@click)にてクリックイベントが発火していないことが原因だと思いますが、解決が難しかったため、ご教示頂けますと幸いです。

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

エラーは発生していません。

該当のソースコード

//vue.js

<template>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <router-link to="/" class="nav-link">Home</router-link>
      </li>
    </ul>

    <ul class="navbar-nav my-2 my-lg-0">
      <!-- ログイン済みなら表示 -->
      <template v-if = "auth">
        <li class="nav-item">
          <router-link to="/login" class="nav-link" @click="logout">Logout</router-link>
        </li>
      </template>
      <!-- 未ログインなら非表示 -->
      <template v-if="!auth">
        <li class="nav-item">
          <router-link to="/login" class="nav-link">Login</router-link>
        </li>
        <li class="nav-item">
          <router-link to="/register" class="nav-link">Register</router-link>
        </li>
      </template>
    </ul>
  </nav>
</template>

<script>
import { computed } from "vue"
import { useStore } from "vuex"
import { useRouter } from "vue-router"
import axios from "axios"

export default {
  name: "Nav",
  setup() {
    const store = useStore()
    const router = useRouter()
    const auth = computed(() => store.state.auth)

    //async 非同期関数
    const logout = async () => {
      alert("通過") //検証用(現在ここが表示されません)

      axios.post('logout', {})
      store.dispatch('setaAuth', false)
      router.push('/login')
    }
    return {
      auth
    }
  }
}
</script>

//index.ts
//vuexででログイン状態を管理しています

import { Commit, createStore } from 'vuex'

export default createStore({
  state: {
    auth: false
  },
  mutations: {
    setAuth: (state: { auth: boolean }, auth: boolean) => state.auth = auth
  },
  actions: {
    setAuth: ({commit}: { commit: Commit }, auth: boolean) => commit('setAuth', auth)
  },
  modules: {
  }
})

試したこと

・＠clickをv-onの表記に変更してみる

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

@vue/cli 4.5.13

以下のサイトを参考にしました▼
Go言語とVue.jsで作るユーザー認証アプリ~フロントエンド開発編

Answer 1

return の中に logout を加えてください

setup () {
  ...
  return {
    auth,
    logout
  }
}

Comments

[wepowepon]

neko_daisuki様

コメントありがとうございます。
頂いた方法で解決しました。解決できずに困っておりましたので、大変助かりました。
もし宜しければ、今後の参考にさせていただきたくどのような思考で導いたのか、ポイントを教えていただけないでしょうか？
setup関数内に登場させた非同期関数に関してはreturnに含めないと発火しないという文法的な問題でしょうか？

[neko_daisuki]

template の中から @click や v-model などで指定する変数やメソッドは
すべて return に含める必要があります。async の有無は関係ないはずです。
自分もハマったことがあるので分かりました。