ユーザー個別ページに直接行くと情報を取得できない（Vue, Vuex）

会員登録制のWebアプリを作っており、/user/:idというURLでユーザー個別のページに飛べるようにしております。

トップページから進んで行った場合はきちんとユーザー情報を取得することができるのですが、いきなり/user/:idに行くと情報を取得することが出来ません。

ユーザーの情報はVuexにて管理しており、App.vueにてcreated()でセットしております。
App.vueおよびUser.vue（ユーザー個別ページ）のコードは以下の通りです。

どこに問題があるのかご教授いただきたいです。よろしくお願い致します。

App
1<script>
2import firebase from 'firebase'
3import db from '@/fb'
4
5export default{
6
7  data(){
8    return{
9      users: [],
10    }
11  },
12
13  created(){
14
15    //Firebaseから全てのユーザー情報を取得
16    db.collection('users').onSnapshot(res => {
17      const changes = res.docChanges();
18      
19      changes.forEach(change => {
20        if(change.type === 'added'){
21          if(change.doc.id !== this.currentUserUid){
22            this.users.push({
23              ...change.doc.data(),
24              id: change.doc.id
25            });
26          }
27        }          
28      });
29      // Vuexにユーザー情報セット
30      this.$store.commit('setOtherUsers', this.users);
31    });
32
33  }
34}
35</script>

User
1<template>
2  <div>
3    <h1>{{thisUser.onamae}}</h1>  //表示できません。
4    <p>{{thisUser.profile}}</p>   //表示できません。
5  </div>
6</template>
7
8<script>
9export default{
10
11  data(){
12    return{
13      userAccountName: '',
14    }
15  },
16
17  created(){
18    this.userAccountName = this.$route.params.id; //現在のユーザーのアカウント名(/user/:idの:idと同じ)
19
20    let self = this;
21    var thisUserData = self.otherUsers.filter(function(user){
22      if (user.accountName == self.userAccountName) return true;
23    });
24
25    thisUserData = thisUserData[0];
26
27    this.$store.commit('setThisUser', thisUserData); //Vuexに現在のページのユーザー情報をセット    
28  },
29
30
31  computed: {
32    ...mapGetters([
33      'otherUsers',
34      'thisUser', //setThisUserでセットした情報のgetter
35    ]),        
36  },
37
38}
39</script>
40
41