Vue3で親から渡されたリストデータを子コンポーネントで表示できません

前提

親子関係のあるコンポーネントで、親で取得したリストデータを子に渡します。
子はそのリストデータを表示するだけですが、リストデータ取得をawait使っているせいなのかF5等で更新した直後は表示されません。

• 親コンポーネントの呼び出し
• axiosでリストデータの取得開始
• 子コンポーネントを描画
• リストデータの取得完了

上記のようにリストデータの取得中に子コンポーネントが描画されるため、リストが表示されないと考えております。

リストデータの取得が完了してから子コンポーネントを描画させるか、
リストデータ取得の完了で子コンポーネントを再描画させる方法など何かしらの解決方法はございますでしょうか。

または、子コンポーネント側でリストデータを取るとかになるのでしょうか。
よろしくお願いいたします。

実現したいこと

• 親コンポーネントを表示した時に子コンポーネントに渡したリストを表示したい。

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

ページ遷移した直後のリストは表示されませんが、例えば「再取得」ボタンなどでリストデータを再取得して子コンポーネントに渡せばうまく表示されます。

該当のソースコード

js

1// 親コンポーネント2<script setup>3import axios from 'axios';4import { reactive } from 'vue';5 6// 子に渡すリストデータ7let somethingList = reactive({});8 9// リストデータを取得（オブジェクトの配列が返ってくる）10const getData = async () => {11 const { data } = await axios.get('/api/something');12 somethingList = data;13};14 15// 再取得用16const reGet = () => {17 getData();18}19</script>20 21<template>22 <div>23 <Child :somethingList="somethingList" />24 <button @click="reGet">再取得</button>25 </div>26</template>

js

1// 子コンポーネント2<script setup>3const props = defineProps({4 somethingList: Object[]5});6</script>7 8<template>9 <ul>10 <li v-for="something in somethingList">11 {{ something.id }}12 </li>13 </ul>14</template>

試したこと

再取得ボタンを作ってリストデータを再取得して子コンポーネントに渡せばうまく表示されました。

補足情報（FW/ツールのバージョンなど）

vue: 3.2.45
vue-router: 4.0.16
axios: 0.27.2