非同期処理にて取得した結果をVueの子コンポーネントに渡したい

Question

Vue3のCompositionAPIにて、親コンポーネント内の非同期で処理した結果を子コンポーネントに渡そうとしているのですが期待した結果にならないため質問いたします。

前提

テストコードのようにpathsとdataというプロパティを持ったオブジェクトをstatという名前で子コンポーネントに渡そうとしています。
※実際は渡したいプロパティが多いためオブジェクトとしてまとめて渡したい。
※Vuexを導入するほどの規模ではないのでなるべくプラグインを使わずに解決したい。
※allSettledでrejectされるとリクエストurlの情報が失われるためpathsとdataセットで渡したい。

環境

• vue: ^3.2.13
• ブラウザ：FirefoxおよびGoogleChromeにて確認

想定する動作

mount時もしくはボタンクリック時にfetchAPIを複数実行し、得られた結果をdataプロパティに格納する。getStatusが終了した時点でdataには結果が入っているので、stat.valueにはpathsとdataを持ったオブジェクトが代入されるはずである。

実際の動作

stat.valueをコンソール出力するとdataプロパティを確認できるが、その後にstat.value.pathsとstat.value.dataを出力すると前者のみ存在し、後者はundefinedと出力される。子コンポーネントで変更検知したタイミングでも同様の状態のまま渡っている。

質問したいこと

1. Promise.allSettled().then()が終了した時点ですべてのPromiseは解決されているという認識でいいでしょうか。
2. pathsが取得できてdataが取得できないということは非同期処理の結果が格納されていないと推察しますが、getStatusメソッドは非同期処理の完了を待たずに終了しているのでしょうか。
3. dataに結果が格納されてから子コンポーネントにオブジェクトを渡すにはどういった方法をとる必要があるでしょうか。

テストコード

・Parent.vue

<template>
	<h3>Parent</h3>
	<button @click="execute">取得</button>
	<Child :stat="stat" />
	<div>{{ stat }}</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Child from '@/components/Child.vue';

const stat = ref({})	//オブジェクトごと代入する想定でrefとしている

onMounted(() => {
	execute()
});

const execute = () => {
	const urls = [
		'https://httpbin.org/status/200', // "OK"
		'https://httpbin.org/status/404', // "NG"
	];
	// 取得した結果をオブジェクトとしてstatに格納。
	stat.value = getStatus(urls);
	console.log('parent')
	console.log(stat.value)	// consoleではdata,paths共に結果が格納されている
							// data: Array [ "OK", "NG" ]
							// paths: Array [ "https://httpbin.org/status/200", "https://httpbin.org/status/404" ]
	console.log(stat.value.paths)	// Array [ "https://httpbin.org/status/200", "https://httpbin.org/status/404" ]
	console.log(stat.value.data)	// undefined
	console.log('parent-end')
}

const getStatus = (urls) => {
	const results = {};
	results['paths'] = urls;
	const promises = urls.map(url => fetch(url));
	// ここで全てのPromiseを解決した値がほしい
	Promise.allSettled(promises).then(resp => {
		results['data'] = resp.map(r => {
			console.log(r)
			if (r.status === "fulfilled"){
				if(r.value.ok){
					return 'OK';
				} else {
					return 'NG';
				}
			} else {
				return 'ERROR';
			}
		});
	});
	return results;
}
</script>

・Child.vue

<template>
	<h4>Child</h4>
	<div v-for="(path, i) in paths" :key="i">
		<div>{{ path }}:{{ data[i] }}</div>
	</div>
</template>

<script setup>
import { ref, toRef, watch } from 'vue';

const props = defineProps({ //eslint-disable-line
	stat: {
		type: Object,
		required: true,
		default: () => ({
			paths: [],
			data: [],
		})
	}
});

const stat = toRef(props, 'stat');
const paths = ref([]);
const data = ref([]);

watch(props, () => {
	console.log('child')
	console.log(props.stat)	// ->consoleではdata,paths共に結果が格納されている
							// data: Array [ "OK", "NG" ]
							// paths: Array [ "https://httpbin.org/status/200", "https://httpbin.org/status/404" ]
	paths.value = stat.value.paths
	data.value = stat.value.data
	console.log(props.stat.paths)	// ->Array [ "https://httpbin.org/status/200", "https://httpbin.org/status/404" ]
	console.log(paths.value)		// ->Array [ "https://httpbin.org/status/200", "https://httpbin.org/status/404" ]
	console.log(props.stat.data)	// ->undefined
	console.log(data.value)			// ->undefined
	console.log('child-end')
})
</script>

Answer 1

最終的にasync/await構文を使用して下部のようなコードで目的の動作を実現できました。
いろいろ検証し、thenはコールバックを登録するだけなのでPromiseの解決を待たずに次へ進むが、awaitはPromiseの解決を待つということを理解できました。
同期的なイメージを持って記述する場合はawaitを使っておくのが安全そうです。

・改善したParent.js（今回の場合はonMountedのasync/awaitはなくても支障ない）

<template>
	<h3>Parent</h3>
	<button @click="execute">取得</button>
	<Child :stat="stat" />
	<div>{{ stat }}</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'; 
import Child from '@/components/Child.vue';

const stat = ref({});	//オブジェクトごと代入する想定でrefとしている

onMounted(async () => {
	await execute()
});

const execute = async () => {
	const urls = [
		'https://httpbin.org/status/200', // "OK"
		'https://httpbin.org/status/404', // "NG"
	];
	// 取得した結果をオブジェクトとしてstatに格納。
	stat.value = await getStatus(urls)

	console.log('parent')
	console.log(stat.value)	
	console.log(stat.value.paths)
	console.log(stat.value.data)
	console.log('parent-end')
}

const getStatus = async (urls) => {
	const results = {};
	results['paths'] = urls;
	const promises = urls.map(url => fetch(url));
	// ここで全てのPromiseを解決した値がほしい
	const resp = await Promise.allSettled(promises)
	results['data'] = resp.map(r => {
		console.log(r)
		if (r.status === "fulfilled"){
			if(r.value.ok){
				return 'OK';
			} else {
				return 'NG';
			}
		} else {
			return 'ERROR';
		}
	});
	return results;
}
</script>