【Vue.js】classのv-bindでvuexのstateの値を参照すると「"RangeError: Maximum call stack size exceeded"」が発生する

Question

前提・実現したいこと

いつもお世話になっております。

現在vue-cli3を使い開発を行っているのですが、firebaseを用いてグーグルアカウントでログインを行いページが切り替わると、「Error in render: "RangeError: Maximum call stack size exceeded"」というエラーメッセージとともにVueが止まってしまい、v-bind等のディレクティブが効かなくなってしまいました。

consoleを見るにエラーメッセージが無限に増えていくので、以下のコード内で「何らかの処理」が無限に繰り返されているようです。
ログイン中のみ起こっており、ログアウトするか別のページに切り替えると収まります。

原因を解明しようにも再帰関数はありませんし、Vue Devtoolsで確認しても特にコンポーネント内の関数が無限に実行されている形跡はなく、自分で見る限りでは問題を発見できませんでした。

完全に手詰まりになっています、どうか皆様お力添えをお願いいたします。

※追記

.homeと.authentication__buttonの2つのclassのv-bindで、loginUserを参照している事が原因かもしれません。
一つを消すと「Error in render: "RangeError: Maximum call stack size exceeded"」のメッセージ自体は出るものの、それも一度だけであり、無限ループは起きていませんでした。

２つ以上すると無限ループするのでしょうか...？
調べてもそこら辺りの情報は出てこず、結局分かりませんでした。

詳しい方、よろしければご教授お願いいたします。

該当部分のコード

※Vuexのstateから読み込んでいるloginUserはログインした時にユーザー情報を格納する変数です。
これをclassのv-bindとcomputedで参照する事でログイン・非ログイン時の表示を切り替えています。

<template>
  <section class="home" :class="{'home--logged-in': loginUser}">
    <div class="title">
      <img class="title__logo" :src="require('@/assets/images/card-background.png')">
      <div class="title__contents">
        <h1 class="title__heading">Online Book Manager</h1>
        <h2 class="title__ruby">読書記録が保存できるオンライン本棚</h2>
        <p class="title__description">
          <span v-html="usage.icon"></span>
          {{ usage.description }}
        </p>
      </div>
    </div>

    <div class="authentication">
      <p class="authentication__sentence">
        <span v-html="instructions"></span>
      </p>
      <a
        class="authentication__button"
        :class="{'authentication__button--logged-in': loginUser}"
        @click="authenticate"
      >
        <span v-html="authentication.icon"></span>
        {{ authentication.processing }}
      </a>
    </div>
  </section>
</template>

※mixinで読み込んでいるauthenticationはfirebaseのログインに関する処理です。
処理自体はsweetalert2でalertを出して、それによりfirebaseのlogin・logoutを実行するという単純なものです。
こちらは動いていた時から弄っていないので、今回は関係ないと思い詳しくは載せていません。

import { mapState } from 'vuex';
import { authentication } from '@/mixins/authentication';

export default {
  name: 'home',
  mixins: [authentication],
  created() {
    this.insertTag('Google');
  },
  data() {
    return {
      tag: '',
    }
  },
  computed: {
    usage() {
      if(!this.loginUser) {
        return {
          icon: '<i class="fas fa-arrow-circle-down"></i>',
          description: 'アプリの利用にはログインが必要です。'
        }
      } else {
        return {
          icon: '<i class="fas fa-arrow-circle-up"></i>',
          description: '左上のタブから本を登録できます。'
        }
      }
    },
    instructions() {
      return !this.loginUser ? `${this.tag}アカウントでOnline Book Managerにログインします。` : 'Online Book Managerからログアウトします。'
    },
    authentication() {
      if(!this.loginUser) {
        return {
          icon: '<i class="fas fa-sign-in-alt"></i>',
          processing: 'Sign in'
        }
      } else {
        return {
          icon: '<i class="fas fa-sign-out-alt"></i>',
          processing: 'Sign out'
        }
      }
    },
    ...mapState(['loginUser']),
  },
  methods: {
    insertTag(word) {
      [...word].forEach((character, index) => {
        this.tag += `<span class="insert${++index}">${character}</span>`;
      })
    },
    authenticate() {
      if(!this.loginUser) {
        this.signIn();
      } else {
        this.signOut();
      }
    }
  }
};

過去の動いていたコード

※主な違いは、マスタッシュ構文を使って表示を切り替えているか、またはv-ifを使ってそれを行っているか。
その分のcssの変更をclassのv-bindを使って行っているか否か、の２つです。

<template>
  <section class="home">
    <div class="title">
      <div class="title__wrapper">
        <h1 class="title__ruby">読書記録が保存できるオンライン本棚</h1>
        <h1 class="title__heading">Online Book Manager</h1>
      </div>
      <p class="title__description">
        <template v-if="!loginUser">
          <i class="fas fa-arrow-circle-right"></i><!-- PC -->
          <i class="fas fa-arrow-circle-down"></i><!-- スマホータブレット -->
          アプリの利用にはログインが必要です。
        </template>
        <template v-else>
          <i class="fas fa-arrow-circle-up"></i>
          左上のタブから本を登録できます。
        </template>
      </p>
    </div>

    <div class="authentication">
      <p class="authentication__sentence">
        <span class="sentence-title">
          <template v-if="!loginUser">
            <span v-html="tag"><!-- Google --></span>アカウントでログイン
          </template>
          <template v-else>
            ログアウト
          </template>
        </span>
        <span class="sentence-description">
          <template v-if="!loginUser">
            GoogleアカウントでOnline Book Managerにログインします。
          </template>
          <template v-else>
            Online Book Managerからログアウトします。
          </template>
        </span>
      </p>
      <a
        class="authentication__login-button"
        v-if="!loginUser"
        @click="loginProcessing"
      >
        <i class="fas fa-sign-in-alt"></i>
        LOGIN
      </a>
      <a
        class="authentication__logout-button"
        v-else
        @click="logoutProcessing"
      >
        <i class="fas fa-sign-out-alt"></i>
        LOGOUT
      </a>
    </div>
  </section>
</template>