vue.js Firebaseログイン認証

前提・実現したいこと

Jsで生成したDOM要素にクリックイベントを持たせる機能をVue.jsでも実現

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

vue.jsでfirebaseのgoogle認証を試しています。
問題としてはログインボタンとログアウトボタンの表示切替になります。
ログイン中のリロードによるログアウト回避のために、onAuthStateChangedをマウントしてますが
firebaseの仕様上、一瞬ログアウト判定となりログインボタンが見えてしまいます。
その一瞬をローティング中に置き換えるやり方もありますが
シンプルにonAuthStateChangedの中に組み込みたいです。
ネイティブだとシンプルに書けますが、vueでの対応が上手く思い浮かびません。

具体的には以下のとなります。

const signOutMessage = "<button onClick="signOut()">サインアウト</button>";
document.getElementById('app').innerHTML = signOutMessage;
と、上記と対になるsignInのコード。

これをvue.jsでやろうとしてもonClickは機能しません。

ログインとログアウトボタンを別にすれば、vueでもv-html @clickで問題ないですが
ux上、ボタン一つにしたいです。

vue.jsでもシンプルに書ける案ないでしょうか。

該当のソースコード

javascript
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>test</title>
7    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
8    <script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-app.js"></script>
9    <script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-auth.js"></script>
10  </head>
11  <body>
12
13    <div id="app">ここにログイン状態の判定の結果をレンダリングしたい</div>
14
15    <script>
16      const firebaseConfig = {
17        apiKey: '',
18        authDomain: '',
19        databaseURL: '',
20        projectId: '',
21        storageBucket: '',
22        messagingSenderId: '',
23        appId: '',
24        measurementId: '',
25      };
26      // Initialize Firebase
27      firebase.initializeApp(firebaseConfig);
28
29      const provider = new firebase.auth.GoogleAuthProvider();
30
31      const app = new Vue({
32        el: '#app',
33        data: {
34          signOutMessage: '',
35          signInMessage: '',
36        },
37
38        methods: {
39          signIn() {
40            firebase
41              .auth()
42              .signInWithPopup(provider)
43              .then((result) => {
44              });
45          },
46          signOut() {
47            firebase.auth().onAuthStateChanged((user) => {
48              firebase
49                .auth()
50                .signOut()
51                .then(() => {
52                  // location.reload(); jsの場合に使う
53                });
54            });
55          },
56        }, //methodsエンド
57        mounted() {
58          firebase.auth().onAuthStateChanged((user) => {
59            if (user) {
60              this.signOutMessage = '<button>サインアウト</button>';
61              // 以下ネイティブだと（vue.js固有の記述を取り除いたうえで）
62              //リロード時にボタンの描写が消えて、判定タイミングで再描写とシンプルでuxが良い。
63              // const signOutMessage = "<button onClick="signOut()">サインアウト</button>";
64              // document.getElementById('app').innerHTML = signOutMessage;
65            } else {
66              this.signInMessage = '<button>サインイン</button>';
67              // const signInMessage = "<button onClick="signIn()">サインイン</button>";
68              // document.getElementById('app').innerHTML = signInMessage;
69            }
70          });
71        },
72      });
73    </script>
74  </body>
75</html>
76

試したこと

・フラグ作成（InとOut)
・DOM要素にv-ifでトリガー設置
・メソッド内でフラグの切り替え
というようなことは試して、パっと見はJsと同じような動きはしますが
レンダリングタイミングとfirebaseの判定タイミングが異なるので、付け焼刃にもなってないです。
（ここを具体的に書いても意味がないのでコードは割愛しました）