Railsインスタンス変数をVue.jsに渡して商品情報を一覧表示させたい

前提・実現したいこと

Railsで食材発注システムを作ろうとしています。

【機能】
・RailsコントローラでDBから商品データを取り出し、Vue.jsに渡してv-forで一覧表示する(ここがうまくいきません)
・DBの商品単価をもとに、数量選択することで合計金額をVue.jsで計算して表示させたい。

はじめはRailsの.eachや.zipを使って「一覧表示」「カートに追加」「発注完了」の動きは実装できました。
その後、Vue.jsを学ぶためにv-forで「一覧表示」「数量入力で合計金額計算」の機能を追加したかったのですが、一覧表示でつまずきました。

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

インスタンス変数をVue.jsでv-for出力すると、データ毎ではなく何故か1文字ずつリストで出力されます。
※練習のため、<table>外にul/liタグで書いています。

・[
・{
・"
・i
・d
・"
・:
・1
・,
・"
・n
・a
・m
・e
・"
・:
・"
・マ
・グ
・ロ
・赤
・身
・"
・,
・"
・c
・r
・e
・a
・t
・e
・d
・_
・a
・t
・"
・:
・"
・2
・0
・2
・1
・-
・0
・6
・-

............

該当のソースコード

Rails
1def new
2  @foods = Food.all
3end

HTML
1
2
3<ul id="kk">
4  <li v-for="food in foods" v-bind:key="food.id">
5    {{ food }}
6  </li>
7</ul>
8
9
10<script>
11var app = new Vue({
12  el: "#kk",
13  data: { 
14    foods: '<%= raw @foods.to_json %>'
15  }
16});
17</script>

試したこと

・v-forを使わず@foodsを出力した結果

・[{"id":1,"name":"マグロ赤身","created_at":"2021-06-06T06:08:50.609Z","updated_at":"2021-06-06T06:08:50.609Z","stok":0,"per":3000},{"id":2,"name":"サーモンフィーレ","created_at":"2021-06-06T08:50:35.513Z","updated_at":"2021-06-06T08:50:35.513Z","stok":0,"per":2500}]

・上記出力結果を、Vue.jsのdataのところにコピペして、v-forした結果

HTML
1<script>
2var app = new Vue({
3  el: "#kk",
4  data: { 
5    foods: [{"id":1,"name":"マグロ赤身","created_at":"2021-06-06T06:08:50.609Z","updated_at":"2021-06-06T06:08:50.609Z","stok":0,"per":3000},{"id":2,"name":"サーモンフィーレ","created_at":"2021-06-06T08:50:35.513Z","updated_at":"2021-06-06T08:50:35.513Z","stok":0,"per":2500}]
6  }
7});
8</script>

・　{ "id": 1, "name": "マグロ赤身", "created_at": "2021-06-06T06:08:50.609Z", "updated_at": "2021-06-06T06:08:50.609Z", "stok": 0, "per": 3000 }
・　{ "id": 2, "name": "サーモンフィーレ", "created_at": "2021-06-06T08:50:35.513Z", "updated_at": "2021-06-06T08:50:35.513Z", "stok": 0, "per": 2500 }

・v-forで、idを指定した結果

HTML
1<ul id="kk">
2    <li v-for="food in foods" v-bind:key="food.id">
3      {{ food.id }}
4    </li>
5  </ul>
6
7<script>
8var app = new Vue({
9  el: "#kk",
10  data: { 
11    foods: '<%= raw @foods.to_json %>'
12  }
13});
14</script>

・
・
・
・
・
・
// ulの「・」がデータの文字数分出力される
......

他に試したことは、
・gon gem → エラーになる

HTML
1<head>
2  <%= javascript_pack_tag 'application',
3                             'data-turbolinks-track': 'reload' %>
4  <%= render 'layouts/shim' %>
5  <%= include_gon %>
6  <%= Gon::Base.render_data %>
7  <%= javascript_include_tag "application" %>
8</head>
9.
10.
11.
12
13<div>
14  {{ test }}
15</div>
16.
17.
18.
19
20<script>
21var app = new Vue({
22    el: "#kk",
23    data: {
24      test: 'gon.user_name'
25    }
26});
27</script>
28
29//エラー
30undefined local variable or method `gon'