Lravel＆Vueでリレーションした配列が上手く表示できません。

実現したいこと

コンソールログでは上手く表示できているが、<template>側で上手く表示出来ないので、
表示できるようにしたいです。

前提

Laravel9(Inertia.js)
Vue3
を使用しております。

memosテーブルとmemo_detailsテーブルのリレーションは上手くいっていて、
配列の中身はonMounted()部分に記載したものと同様になっています。

問題の箇所は {{ memo.memo_details[0].content }} 部分 になり、
何故、onMounted()部分に記載した配列は上手くコンソールログに表示されているのに、
<template>側に {{ memo.memo_details[0].content }} と記載するとエラー
TypeError: Cannot read properties of undefined (reading 'content')
が出てcontentが表示されないのでしょうか？

ちなみに
{{ memo.memo_details[0] }} とすると
{ "id": 19, "memo_id": 7, "rows": 0, "content": "内容1"} とここまで問題なく表示されます。

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

TypeError: Cannot read properties of undefined (reading 'content')

該当のソースコード

Memo.phpモデル

1public function memoDetails() // リレーション先 2{ 3 return $this->hasMany('App\Models\Memo_detail'); 4}

MemoController.phpコントローラー

1// memosテーブルとmemo_detailsテーブルをリレーション 2$memoRelations = Memo::with('memoDetails')->get(); 3 4return Inertia::render('Memo/Index', [ 5 'memoRelations' => $memoRelations, 6]);

Memo/Index.vueファイル

1<script setup> 2import { onMounted } from 'vue'; 3 4defineProps({ 5 memoRelations: Array, 6}) 7 8onMounted(() => { 9 // コンソールに出力されるかテストしました！「memoRelations: Array」の中身は同じようになっています。 10 const memo = { 11 "id": 7, "title": "テストタイトル", 12 "memo_details":[ 13 { "id": 19, "memo_id": 7, "rows": 0, "content": "内容1", }, 14 { "id": 20, "memo_id": 7, "rows": 1, "content": "内容2", }, 15 { "id": 21, "memo_id": 7, "rows": 2, "content": "内容3", } 16 ] 17 } 18 // 問題なく出力されています！ 19 console.log(memo.memo_details[0].content); // 出力 内容1 20}) 21</script> 22 23<template> 24 省略 25 <table> 26 <thead> 27 <tr> 28 <th>タイトル</th> 29 <th>内容</th> 30 <th>削除機能</th> 31 </tr> 32 </thead> 33 <tbody> 34 <tr v-for="memo in memoRelations" :key="memo.id"> 35 <td> 36 {{ memo.title }} 37 </td> 38 <td> 39 {{ memo.memo_details[0].content }} 40 </td> 41 <td> 42 <button>削除</button> 43 </td> 44 </tr> 45 </tbody> 46 </table> 47 省略 48</template>

試したこと

以下のように多重ループだと表示は出来ていますが、リレーション先・memo_detailsテーブルの
内容(content)を一件も登録していない場合、添付画像のように横方向が「行」がずれてしまいます！

Memo/Index.vueファイル

1省略 2<tr v-for="memo in memoRelations" :key="memo.id"> 3 <td> 4 {{ memo.title }} 5 </td> 6 <td v-for="memoDetail in memo.memo_details" :key="memoDetail.memo_id"> 7 // 仮に・（中黒）を付けてると横方向が「行」が上手くいきそうですが、・も表示されません！ 8 ・{{ memoDetail.content }} 9 </td> 10 <td> 11 <button>削除</button> 12 </td> 13</tr> 14省略

長文ですみません。ご存じの方、お手数ですがよろしくお願い致します。