Vue.js でのv-forの配列処理

Question

前提・実現したいこと

laravelでvue.jsを用いてSPAの作成に取り組んでおり、飲み物一覧を表示するviewを作成しております。
そこでv-forディレクティブを使用を使用し配列drinksを分解し、drinkを表示したいのですがなかなか上手くできません。
viewには何も表示がされない状態となります

ソースコード

<ol>
  <li v-for="(drink, index) in drinks" :key="index">
    {{ drink.name }}
  </li>
</ol>

<script>
    export default {
      data: function(){
        return {
          drinks: []
        }
      },
      methods: {
           getDrinks() {
               axios.get('api/drinks')
                   .then((res) => {
                       this.drinks = res.data;
                   })
                   .catch(error => {console.log(error)
				          });
           }
      },
      mounted() {
           this.getDrinks();
      }
    }
</script>

試したこと

v-forの記載方法にミスがあるのかと考え記述を下記に変更するも変化は見られませんでした

v-for="drink of drinks" v-bind:key="drink.name"

また{{drink.name}}を{{drink}}に変更したところ一つのリストに配列drinksの情報が入ってしまいます。
下記に写真を添付しております

<li v-for="(drink, index) in drinks" :key="index">
    {{ drink }}
</li>

初歩的にな質問で申し訳ありませんがよろしくお願いいたします。

Comments

[gyarasu]

drinksのデータ構造はどうなっていますか？

[k3114]

質問に上手く答えれているかわかりませんが、添付した写真がdrinksの構造となっております。
データの数は19個あり、それぞれ
id, name ,price, image, amount, explanation_title, explanation_body, buy_count, enrgy......（成分カラム割愛）となっております。
よろしくお願い致します

Answer 1

controllerでの処理がこのような形で記述しておりました.

$drinks = Drink::all();
return  response()->json(['drinks' => $drinks]);

考えてくださっった方々申し訳ございません。
そしてありがとうございます