Vuejsで複雑なjsonを操作したい

Laravelからaxiosで取得したJson形式のデータを操作する方法が分からず困っております。初心者です。

現在採算管理システムを作成しておりまして、LaravelからAPIで取得したデータをVuejsで操作したいのですが、
うまく行っておりません。以下詳細です。

Laravel
1[
2  {
3    "id": 377,
4    "accountName": "荷造運賃費",
5    "price": 88000,
6    "journal": "東京から大阪への引越し代金。",
7    "year": 2020,
8    "month": 8,
9    "day": 1,
10    "date": "2020-08-01",
11    "created_at": "2020-08-01 16:04:47",
12    "updated_at": "2020-08-01 16:04:47"
13  },
14  {
15    "id": 378,
16    "accountName": "国内旅費",
17    "price": 2000,
18    "journal": "SUICAチャージ代金。",
19    "year": 2020,
20    "month": 8,
21    "day": 1,
22    "date": "2020-08-01",
23    "created_at": "2020-08-01 16:06:16",
24    "updated_at": "2020-08-01 16:06:16"
25  },
26  {
27    "id": 379,
28    "accountName": "衣料品費",
29    "price": 700,
30    "journal": "靴下を調達",
31    "year": 2020,
32    "month": 8,
33    "day": 2,
34    "date": "2020-08-02",
35    "created_at": "2020-08-02 18:57:27",
36    "updated_at": "2020-08-02 18:57:27"
37  },
38  {
39    "id": 380,
40    "accountName": "雑収入",
41    "price": -5584,
42    "journal": "保険料の返金",
43    "year": 2020,
44    "month": 8,
45    "day": 2,
46    "date": "2020-08-02",
47    "created_at": "2020-08-02 18:58:45",
48    "updated_at": "2020-08-02 18:58:45"
49  },
50  {
51    "id": 381,
52    "accountName": "食料品費",
53    "price": 120,
54    "journal": "自販機でコーヒーを購入する。",
55    "year": 2020,
56    "month": 8,
57    "day": 3,
58    "date": "2020-08-03",
59    "created_at": "2020-08-03 13:22:17",
60    "updated_at": "2020-08-03 13:22:17"
61  },
62.
63.
64.
65

上記のデータを取得したのですが、Vuejsでこのpriceデータの合計金額を算出しようと
array.forEachやfor文などを使用してみましたが、うまくいきませんでした。

下記のソースのh2タグに合計金額を計算したものを表示させたいなと考えております。
スクリプトタグ内で計算して表示させる方法をご存知の方がいれば教えて頂けますと幸いです。
どうぞ宜しくお願いします。

Vue.js
1<template>
2  <div class="container">
3    <h2>ここで合計金額を表示したい！！</h2>
4    <table class="table table-hover">
5      <thead class="thead-light">
6        <tr>
7          <th scope="col">id</th>
8          <th scope="col">account</th>
9          <th scope="col">price</th>
10          <th scope="col">journal</th>
11          <th scope="col">year</th>
12          <th scope="col">month</th>
13          <th scope="col">day</th>
14          <th scope="col">Watch</th>
15        </tr>
16      </thead>
17      <tbody>
18        <tr v-for="(cost, index) in costs" :key="index">
19          <th scope="row">{{ cost.id }}</th>
20          <td>{{ cost.accountName }}</td>
21          <td>{{ cost.price }}</td>
22          <td>{{ cost.journal }}</td>
23          <td>{{ cost.year }}</td>
24          <td>{{ cost.month }}</td>
25          <td>{{ cost.day }}</td>
26          <td>
27            <router-link v-bind:to="{name: 'cost.detail', params: { costId: cost.id } }">
28              <button class="btn btn-primary">Watch</button>
29            </router-link>
30          </td>
31        </tr>
32      </tbody>
33    </table>
34  </div>
35</template>
36<script>
37export default {
38  props: {
39    year: Number,
40    month: Number,
41    day: Number,
42  },
43  data: function () {
44    return {
45      costs: [],
46      totalAmount: 0,
47    };
48  },
49  methods: {
50    getCostData() {
51      if (this.day === undefined) {
52        axios
53          .get("/api/cost/list/" + this.year + "/" + this.month)
54          .then((res) => {
55            this.costs = res.data;
56          });
57      } else {
58        axios
59          .get(
60            "/api/cost/list/" + this.year + "/" + this.month + "/" + this.day
61          )
62          .then((res) => {
63            this.costs = res.data;
64          });
65      }
66      for (var item in this.costs) {
67        totalAmount += this.costs[item]["price"];
68      }
69    },
70  },
71  mounted() {
72    this.getCostData();
73  },
74};
75</script>
76
77