【Vue x Firebase】パラメーター変更を検知にてページ遷移後、情報が残ったままになってしまう。

Question

公式リファレンスにある「パラメーター変更の検知」を参考にwatchを使用してパラメーター変更を検知させており、文字列は問題なく再描写され、問題なく表示されておりますが、配列は遷移前のユーザーのデータが残ったまま引き継いでしまい、加算されてしまいます。

#自身のマイページ

#他ユーザーのマイページ

#他ユーザーのマイページから自身のマイページへページ遷移後


上記投稿一覧には自身が投稿したpostが表示されるようにしておりますが、「他ユーザーの投稿したpost」と「自身の投稿したpost」が追加されて計４投稿表示されてしまっております。

※自身のマイページへページ遷移後、他ユーザーの情報が自身のマイページで残ったままになってしまっており、手動でリロードしたら正しい情報で自身のマイページへ戻ります。

情報が残ったままにならないようにするためにはどうすればよろしいのでしょうか。

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

よろしくお願いいたします。

#mypost.vue

<template>
  <div class="profile-posts">
    <paginate
      name="paginate-listData"
      tag="ol"
      :list="listData"
      :per="3"
      v-if="listData.length !== 0"
    >
      <List
        v-for="(list, index) in paginated('paginate-listData')"
        :index="index"
        :list="list"
        :key="list.id"
      />
    </paginate>
    <div v-else class="nothing flex">投稿はありません</div>
    <paginate-links
      for="paginate-listData"
      name="paginate-listData"
      :async="true"
      class="pagination flex"
      :show-step-links="true"
      :style="listData == '' ? 'display:none;' : 'display:flex;'"
    ></paginate-links>
  </div>
</template>

import firebase from "firebase";
import List from "@/components/list.vue";
import Vue from "vue";
import VuePaginate from "vue-paginate";
Vue.use(VuePaginate);

export default {
  data() {
    return {
      listData: [],
      paginate: ["paginate-listData"]
    };
  },
  components: {
    List
  },

methods: {
    updateData() {
      firebase
        .firestore()
        .collection("posts")
        .orderBy("time", "desc")
        .where("uid", "==", this.$route.params.uid)
        //uidをフィルタリングして現在のURLと合致するもののみを参照
        .get()
        .then(snapshot => {
          snapshot.forEach(doc => {
            this.listData.push(doc.data());
          });
        });
    }
  },
  watch: {
    //watchプロパティは、指定した要素の変更を監視するもの
    "$route.params.uid": {
      //対象のオブジェクト
      handler: function() {
        this.updateData();
        //処理
      },
      deep: true,
      //入れ子になったデータ（オブジェクトのプロパティ）を監視する場合、handlerとdeep:trueのどちらも必須。
      immediate: true
      //ページが読み込まれた時に処理を行いたい場合は、immediate: trueを設置。
    }
  }

Answer 1

watch部で以下のように単純に一旦空にしてあげることで解決しました。

watch: {
    "$route.params.uid": {
      handler: function() {
        this.listData = [];
        this.bookmarkData = [];
        this.updateData();
      },
      deep: true,
      immediate: true
    }
  }