Nuxt,FirebaseauthenticationでError: [vuex] do not mutate vuex store state outside mutation handlers.

現在Nuxt + Firebase authenticationで新規登録、ログイン、ログアウト機能を実装しています。
状態管理にVuexを使用しており、ログアウト時にstateのuserの値にnullを代入する実装をしていますが、
ログアウト実行時に

Error: [vuex] do not mutate vuex store state outside mutation handlers.

というエラーが発生しています。
ログアウトはできていてstateのuserの値もnullに更新されていることは確認できています。
原因がわからず困っております。
アドバイスいただきますよう何卒よろしくお願いいたします。

動作環境

package	version
nuxt	2.15.8
firebase	9.6.5
Vuetify	2.6.1

期待する動作

Firebaseを使用してログアウトする際ににエラーなくログアウトしたい。

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

ログアウト時にError: [vuex] do not mutate vuex store state outside mutation handlers.というエラーが発生する

参考にしたサイト

以下のリンクを参考にしました。
Firebase Authentication と NUXT（vue.js）で簡単にユーザー登録＆認証を作成する｜ Metrocode.co
ただし今回と同じエラーが発生するため、vuexのactionsではなく登録ページ、ログインページ、ログアウトページにそれぞれFirebaseAuthenticationのコードを記述して動作させています。

該当するコード(5)

新規登録は問題なく動作したので念の為追記しました。

plugins/firebase.js(1/5)

js
1import { getApp, getApps, initializeApp } from 'firebase/app'
2import {
3  browserSessionPersistence,
4  deleteUser,
5  createUserWithEmailAndPassword,
6  getAuth,
7  onAuthStateChanged,
8  setPersistence,
9  sendEmailVerification,
10  signInWithEmailAndPassword,
11  signOut,
12} from 'firebase/auth'
13
14export default ({ $config }, inject) => {
15  const firebaseConfig = {
16    apiKey: $config.firebase.apiKey,
17    appId: $config.firebase.appId,
18    authDomain: $config.firebase.authDomain,
19    measurementId: $config.firebase.measurementId,
20    messagingSenderId: $config.firebase.messagingSenderId,
21    projectId: $config.firebase.projectId,
22    storageBucket: $config.firebase.storageBucket,
23  }
24
25  const app = !getApps().length ? initializeApp(firebaseConfig) : getApp()
26  const auth = getAuth(app)
27
28  inject('fire', {
29    auth,
30    browserSessionPersistence,
31    deleteUser,
32    createUserWithEmailAndPassword,
33    onAuthStateChanged,
34    sendEmailVerification,
35    setPersistence,
36    signInWithEmailAndPassword,
37    signOut,
38  })
39}
40

front/middleware/authenticated.js(2/5)

js
1export default ({ store, route, redirect }) => {
2  if (
3    store.getters.isAuthenticated &&
4    (route.name === 's2/login' || route.name === 's2/signup')
5  ) {
6    redirect('/s2-sample')
7  }
8  if (
9    !store.getters.isAuthenticated &&
10    route.name !== 's2/login' &&
11    route.name !== 's2/signup'
12  ) {
13    redirect('/s2/login')
14  }
15}
16

store/index.js(3/5)

js
1export const state = () => ({
2  user: null,
3})
4
5export const getters = {
6  user(state) {
7    return state.user
8  },
9  isAuthenticated(state) {
10    return !!state.user
11  },
12}
13
14export const mutations = {
15  setUser(state, payload) {
16    state.user = payload
17  },
18}
19
20export const actions = {
21//   ログアウト時のstate更新用
22  setUser({ commit }, data) {
23    commit('setUser', data)
24  },
25}
26

【登録ページは期待通りの動作】pages/s2/signup.vue(4/5)

js
1<template>
2  <v-container>
3    <v-row justify="center">
4      <v-col sm="12" md="5">
5        <h2 class="text-center subtitle-1 font-weight-bold mb-2">
6          メールアドレスで登録
7        </h2>
8        <v-row>
9          <v-col>
10            <v-tabs
11              v-model="tab"
12              background-color="transparent"
13              color="blue accent-2"
14              grow
15              class="mb-3"
16            >
17              <v-tab to="/s2/login">ログイン</v-tab>
18              <v-tab to="/s2/signup">アカウント登録</v-tab>
19            </v-tabs>
20
21            <v-row>
22              <v-col sm="12">
23                <v-card flat>
24                  <v-card-text class="pa-0">
25                    <v-form
26                      ref="register_form"
27                      v-model="register_valid"
28                      lazy-validation
29                    >
30                      <v-text-field
31                        v-model="email"
32                        label="メールアドレス"
33                        required
34                        validate-on-blur
35                      />
36
37                      <v-text-field
38                        ref="register_password"
39                        v-model="password"
40                        label="パスワード"
41                        required
42                        :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
43                        :type="showPassword ? 'text' : 'password'"
44                        validate-on-blur
45                        @click:append="showPassword = !showPassword"
46                      >
47                        <!-- <template v-slot:progress>
48                          <v-progress-linear
49                            :value="score.value"
50                            :color="score.color"
51                            absolute
52                            height="2"
53                          />
54                        </template> -->
55                      </v-text-field>
56                      <v-text-field
57                        v-model="passwordConfirmation"
58                        label="パスワード（確認）"
59                        required
60                        :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
61                        :type="showPassword ? 'text' : 'password'"
62                        validate-on-blur
63                        @click:append="showPassword = !showPassword"
64                      />
65
66                      <v-alert v-if="registerErrorMsg" dense text type="error">
67                        {{ registerErrorMsg }}
68                      </v-alert>
69
70                      <v-btn
71                        :disabled="!register_valid"
72                        color="blue darken-3"
73                        class="mr-4 white--text"
74                        @click="signUp"
75                      >
76                        登録
77                      </v-btn>
78                    </v-form>
79                  </v-card-text>
80                </v-card>
81              </v-col>
82            </v-row>
83            <v-divider class="my-8" />
84          </v-col>
85        </v-row>
86      </v-col>
87    </v-row>
88  </v-container>
89</template>
90
91<script>
92export default {
93  name: 'S2Signup',
94  // layout: 'sampleSignUp',
95  data() {
96    return {
97      registerErrorMsg: '',
98      tab: null,
99      register_valid: true,
100      email: '',
101      password: '',
102      passwordConfirmation: '',
103      showPassword: false,
104    }
105  },
106  methods: {
107    async signUp() {
108      await this.$fire
109        .createUserWithEmailAndPassword(
110          this.$fire.auth,
111          this.email,
112          this.password
113        )
114        .then((userCredential) => {
115          const user = userCredential.user
116          this.$store.commit('setUser', userCredential.user)
117          this.$router.push({
118            name: 's2-sample',
119          })
120        })
121        .catch((error) => {
122          console.log('error:', error)
123          console.log('error code:', error.code)
124          console.log('error message:', error.message)
125        })
126    },
127  },
128}
129</script>

【問題のページ、ログアウト機能内包】pages/s2/sample.vue(5/5)

js
1<template>
2  <v-container>
3    <v-row wrap justify="center" align="center">
4      <v-col :sm="12" :md="8">
5        <p class="text-center">ログインユーザのみ閲覧可能なコンテンツ</p>
6        <div class="pa-5">
7          <v-btn
8            block
9            color="indigo darken-1"
10            nuxt
11            to="/sample_sample"
12            class="white--text"
13          >
14            サンプルページへ
15          </v-btn>
16        </div>
17        <div class="pa-5">
18          <v-btn block outlined color="grey darken-3" @click="signOut">
19            ログアウト
20          </v-btn>
21        </div>
22      </v-col>
23    </v-row>
24  </v-container>
25</template>
26
27<script>
28export default {
29  name: 'S2Sample',
30  middleware: 'authenticated',
31  methods: {
32    async signOut() {
33      await this.$fire
34        .signOut(this.$fire.auth)
35        .then(() => {
36          // 以下のエラーが発生する
37          // [vuex] do not mutate vuex store state outside mutation handlers.
38          this.$store.commit('setUser', null)
39          // store/index.jsのactionsのメソッドを使用しても同じエラーが発生する
40          // this.$store.dispatch('setUser', null)
41          // 値をnullで渡したことが原因で発生していると思い以下を試したが同じエラーが発生する
42          // this.$store.commit('setUser', this.$store.state.user)
43        })
44        .catch((error) => {
45          console.log('error:', error)
46          console.log('error code:', error.code)
47          console.log('error message:', error.message)
48        })
49    },
50  },
51}
52</script>