Vue.jsでECサイト作成中。v-forが画面に表示されません。

前提・実現したいこと

Vue.jsでECサイトを制作しております。
データベースにある商品情報を表示させる際に以下の問題が発生しました。

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

v-forで商品情報を表示させたいのですが
画面上にエラーすら表示されず、もちろん商品情報も表示がされません。

該当のソースコード

<template> <div class="about"> <v-app> <h3>商品検索画面</h3> <v-text-field label="検索内容を入力" v-model="text" style="width:300px"></v-text-field> <v-btn @click="search()">検索</v-btn><v-btn @click="kuria()" value="text">クリア</v-btn> <h3>商品一覧</h3> <div v-if="this.FoodList[0]"> <span>商品数：{{FoodList[0].food.length}}</span> <span>トッピング数：{{FoodList[1].Topping.length}}</span> <div v-for="min in FoodList[0].food" :key="min.name"></div> <div>商品：{{min.name}}</div> <p>値段：￥{{min.food[1].priceL}}円</p> <p>値段：￥{{min.food[1].priceM}}円</p> --> <p><v-btn @click="detail()">商品詳細</v-btn></p> </div> <v-btn @click="check">確認</v-btn> </v-app> </div> </template> <script> import {mapGetters} from 'vuex' export default { name: 'About', components: { }, data(){ return{ text:'', min:'', FoodList:[], } } , created(){ this.FoodList=this.$store.state.Foods this.getFood() this.getTopping() }, methods:{ // ...mapActions(["fetchFood","fetchTopping"]), kuria(){ this.text='' }, check(){ console.log(this.getFood) console.log(this.getTopping) console.log(this.FoodList) }, detail(){ this.$router.push(`/detail`) }, }, computed: { ...mapGetters(['getFood','getTopping']), }, } </script>

storeの内容は画像の内容となります。

![]