【Vue x Firestore】Firestoreにて削除アラート実行後、リアルタイムで投稿を画面からも消したいです。

#Firestoreにて削除アラート実行後、リアルタイムで投稿を画面からも消したいです。

親コンポーネントである「board.vue」に子コンポーネント「list.vue」を配置させて
list.vueで投稿の削除ボタン（deletePost()）を作成し、削除ボタンが押下されたら
Firebaseのデータベースから削除、かつ画面上（配列）からも削除させたいと考えています。

削除後、画面ではリアルタイムで削除されたか確認が出来ない為、リロードすると削除されていることは
確認出来るため、それを活用して以下のようにthis.$router.go({path: /board/${this.$route.params.uid},force: true,を挿入して、
アラート実行後リロードさせるようにしてみたのですが、画面上変化なく、また削除も実行されない状況です。

 deletePost() {
      const currentUser = firebase.auth().currentUser;
      this.uid = currentUser.uid;
      if (this.list.uid == this.uid) {
        this.$swal({
          title: "内容確認",
          text: "投稿を削除しますか？",
          icon: "warning",
          buttons: true,
          dangerMode: true,
        })
          .then(() => {
            firebase
              .firestore()
              .collection("posts")
              .doc(this.list.id)
              .delete();
            this.$swal("投稿を削除しました", {
              icon: "success",
            });
            this.$router.go({
            path: `/board/${this.$route.params.uid}`,
            force: true,
            });
          })
          .catch(() => {
            this.$swal("キャンセルしました。");
          });
      }

原因が分からず困っております。。

分かる方いらっしゃいましたらお力添えを頂きたいです。

宜しくお願い致します。

#list.vue

html
1<template>
2  <div class="card">
3    <div class="face face1 flex">
4      <div class="content">
5        <img class="profile-icon" width="50" height="50" src="uploadedImage" />
6        <h3>{{ list.title }}</h3>
7        {{ list.id }}
8      </div>
9    </div>
10    <div class="face face2 flex">
11      <div class="content flex">
12        <button class="hide-btn" @click="deletePost">×</button>
13        <p>{{ list.description }}</p>
14        <router-link :to="`/chat/${list.id}`" class="join-btn flex"
15          >ルームへ参加</router-link
16        >
17        <img
18          src="../assets/ブックマーク.jpg"
19          alt="ブックマーク"
20          class="bookmark-icon"
21          @click="savePost"
22        />
23        <p class="post-time">{{ list.time.toDate().toLocaleString() }}</p>
24      </div>
25    </div>
26  </div>
27</template>

js
1deletePost() {
2      const currentUser = firebase.auth().currentUser;
3      this.uid = currentUser.uid;
4      if (this.list.uid == this.uid) {
5        this.$swal({
6          title: "内容確認",
7          text: "投稿を削除しますか？",
8          icon: "warning",
9          buttons: true,
10          dangerMode: true,
11        })
12          .then(() => {
13            firebase
14              .firestore()
15              .collection("posts")
16              .doc(this.list.id)
17              .delete();
18            this.$swal("投稿を削除しました", {
19              icon: "success",
20            });
21          })
22          .catch(() => {
23            this.$swal("キャンセルしました。");
24          });
25      }

#board.vue

html
1<template>
2  <div>
3    <Header />
4    <Post />
5    <div class="post">
6      <h2 class="post-tll neon">投稿一覧</h2>
7      <div class="post-inner">
8        <div class="post-items">
9          <paginate name="paginate-log" :list="allData" :per="12">
10            <List
11              v-for="(list, index) in paginated('paginate-log')"
12              :index="index"
13              :list="list"
14              :key="list.id"
15            />
16          </paginate>
17          <paginate-links
18            for="paginate-log"
19            class="pagination"
20            :show-step-links="true"
21          ></paginate-links>
22        </div>
23      </div>
24    </div>
25  </div>
26</template>
27