Spookie/assets/js/components/blog/BlogPost.vue

<template>
	<div
		v-if="blogPost"
		class="
      flex
      m-2
      gap-2
      items-center
      shadow-md
      w-1/4
      flex-grow
      rounded
      overflow-hidden
    "
		style="border: 1px solid #eee"
	>
		BlogIPost
		<img
			src="https://via.placeholder.com/150"
			style="background: #cccccc"
			width="150"
			height="150"
			alt="placeholder"
		>
		user {{ blogPost.userId }}:
		<div v-if="user">
			"{{ user.name }}
		</div>
		<br>
		{{ blogPost.title }}<br>
		{{ blogPost.body }}
	</div>
</template>

<script setup async>
import { useRoute } from 'vue-router'
import useResource from '@/composables/useResource'

const route = useRoute()

const { item: blogPost, fetchOne: fetchOneBlog } = useResource('https://jsonplaceholder.typicode.com/posts')
await fetchOneBlog(route.params.id)

const { item: user, fetchOne: fetchOneUser } = useResource('https://jsonplaceholder.typicode.com/users')
fetchOneUser(blogPost.value.userId)

</script>