ローカライズされているJSONファイルから、検索結果だけ表示したい

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

現在Vue.jsで検索機能を作成しているのですが、ローカライズのために作成したJSONファイルから検索結果のみを取り出そうとすると何も表示されません。

１）ローカライズするために、export Defaultの内部ではなく、JSONファイルから取り出す形でHomeにカード一覧を表示する
２）するとcomputedでjsonファイルから取り出すことができない
３）なので、もともとのexport Default内部から取り出す形にすると、検索結果は表示されるが、カード内の文章がローカライズできない

という状況です

他の良い方法をご存知の方、もしくは同じような問題に直面したことがある方に、ご助力頂けると幸いです。

検索機能が実装されていない場合↓

HomeVue
1<template>
2  <div class="homeImage pt-5">
3    <input type="text" v-model="keyword" :placeholder="$t('search')">
4    <br><br>
5    <b-container>
6      <b-card-group columns>
7        <b-card
8          v-for="(game, index) in filteredgames"
9          :key="index"
10          :title="game.area"
11          :img-src="game.img"
12          :img-alt="game.area"
13          img-top
14          tag="article"
15          class="card"
16        >
17          <b-card-text>
18            {{ game.info }}
19          </b-card-text>
20
21          <b-button @click="toTeams(index)" variant="primary">{{ $t('info.teamMembersInfo') }}</b-button>
22        </b-card>
23      </b-card-group>
24    </b-container>
25  </div>
26</template>
27
28<script>
29// @ is an alias to /src
30
31
32export default {
33  name: "Home",
34  components: {},
35  data() {
36    return {
37      keyword: '',
38      
39    }
40  },
41  methods: {
42    toTeams(pathz) {
43      this.$router.push({ path: `/${this.$i18n.locale}/teams/${pathz}` })
44    }
45  },
46  computed: {
47            filteredgames: function() {
48                var games = [];
49                for(var i in this.games) {
50                    var game = this.games[i];
51                    if(game.area.indexOf(this.keyword) !== -1 ||
52                        game.text.indexOf(this.keyword) !== -1) {
53                        games.push(game);
54                    }
55                }
56                return games;
57            }
58        }
59};
60</script>
61<style  scoped>
62.homeImage {
63  background-image: url("https://cdn150.picsart.com/232635544019202.jpg?type=webp&to=min&r=1024");
64  background-repeat: no-repeat;
65  background-size: cover;
66  min-height: 100vh;
67  background-position: center;
68}
69.rounded-card {
70  border-radius: 20px;
71  min-height: 50px;
72  min-width: 20px;
73}
74.card{
75    margin-bottom: 15px;
76}
77</style>

この場合↓の画像のように何も表示されません。

検索機能は実装できたが、ローカライズできない場合↓
export Default内で

HomeVue
1<template>
2  <div class="homeImage pt-5">
3    <input type="text" v-model="keyword" :placeholder="$t('search')">
4    <br><br>
5    <b-container>
6      <b-card-group columns>
7        <b-card
8          v-for="(game, index) in filteredgames"
9          :key="index"
10          :title="game.heading"
11          :img-src="game.img"
12          img-alt="Image"
13          img-top
14          tag="article"
15          style="max-width: 20rem"
16          class="card"
17        >
18          <b-card-text>
19            {{ game.text }}
20          </b-card-text>
21          <b-button @click="toTeams(index)" variant="primary">{{ $t('info.teamMembersInfo') }}</b-button>
22        </b-card>
23      </b-card-group>
24    </b-container>
25  </div>
26</template>
27
28<script>
29// @ is an alias to /src
30
31
32export default {
33  name: "Home",
34  components: {},
35  data() {
36    return {
37      keyword: '',
38      games: [
39        {
40          heading: 'Basketball',
41          text:
42            "Hello Basketball players, want to know about team members. Click Below.",
43          img:
44            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQt0Sh97iYcu0kTguhcsW_szWfzolqu1ynGeQ&usqp=CAU",
45        },
46        {
47          heading: 'Badminton',
48          text:
49            "Hello Badminton lovers, want to know about team members. Click Below.",
50          img:
51            "https://i2.wp.com/www.healthfitnessrevolution.com/wp-content/uploads/2014/03/badminton-1428047_1920-2.jpg?fit=1920%2C1280&ssl=1",
52        },
53        {
54          heading: 'Football',
55          text:
56            "Hello Football lovers, want to know about team members. Click Below.",
57          img:
58            "https://www.worcester.gov.uk/images/easyblog_shared/2019/b2ap3_large_Football---carousel.jpg",
59        },
60        {
61          heading: 'Cricket',
62          text:
63            "Hello Cricket lovers, want to know about team members. Click Below.",
64          img:
65            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYHGznCkqXL8MbFAy8YrYgk3LWzPU9b95T5g&usqp=CAU",
66        },
67        {
68          heading: 'Handball',
69          text:
70            "Hello Handball lovers, want to know about team members. Click Below.",
71          img:
72            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdz75gWK12Q2d_p3aahNW52yui2cc7USM1dg&usqp=CAU",
73        },
74        {
75          heading: 'Vollyball',
76          text:
77            "Hello Vollyball lovers, want to know about team members. Click Below.",
78          img:
79            "https://www.pe.com/wp-content/uploads/2019/11/xxxx_spo_ocr-l-volleyball-generic-stock-001-3.jpg",
80        },
81        {
82          heading: 'Tabletenis',
83          text:
84            "Hello Tabletennis lovers, want to know about team members. Click Below.",
85          img:
86            "https://www.southdownsleisure.co.uk/wp-content/uploads/2019/03/50_tabletennis-600x600.jpg",
87        },
88      ],
89    }
90  },
91  methods: {
92    toTeams(pathz) {
93      this.$router.push({ path: `/${this.$i18n.locale}/teams/${pathz}` })
94    }
95  },
96  computed: {
97            filteredgames: function() {
98                var games = [];
99                for(var i in this.games) {
100                    var game = this.games[i];
101                    if(game.heading.indexOf(this.keyword) !== -1 ||
102                        game.text.indexOf(this.keyword) !== -1) {
103                        games.push(game);
104                    }
105                }
106                return games;
107            }
108        }
109};
110</script>
111<style  scoped>
112.homeImage {
113  background-image: url("https://cdn150.picsart.com/232635544019202.jpg?type=webp&to=min&r=1024");
114  background-repeat: no-repeat;
115  background-size: cover;
116  min-height: 100vh;
117  background-position: center;
118}
119.rounded-card {
120  border-radius: 20px;
121  min-height: 50px;
122  min-width: 20px;
123}
124.card{
125    margin-bottom: 15px;
126}
127</style>

この場合、↓の画像のように表示されますが
それだと、export default内部では$t()を使ってローカライズできません

ApartOfHomeVue
1games: [
2        {
3          heading: '$t(basketball.heading)',
4          text:
5            "Hello Basketball players, want to know about team members. Click Below.",
6          img:
7            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQt0Sh97iYcu0kTguhcsW_szWfzolqu1ynGeQ&usqp=CAU",
8        },
9        {