Vue方法“注销”未在实例上定义，但在渲染期间被引用

Question

我已经阅读了此错误消息的多个答案，但没有一个能够解决我的问题。当我单击按钮时，我只是试图调用一个方法，这看起来是如此简单，以至于我看不出有多少错误。

@click处理程序如何看不到我的“注销”方法？

NavBar.vue

<template>
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
            <div class="container-fluid">
                <a class="navbar-brand" href="">CSW</a>
                <button @click="logout" class="btn float-right">Log Out</button>
            </div>
        </nav>
    </div>
</template>

<script>
    export default {
        methods: {
            logout() {
                this.$store.dispatch("auth/logout")
                .then(() => {
                    this.$router.push('/login')
                });
            }
        }
    }
<script>