Displaying posts details using Json returns undefine in vue3 - vue.js

Question

After successfully fetching posts using JSON, I also want to display the details of the post on the post details.vue page but I get an undefined error.
I am sure there is something I am not doing right but I can't figure it out as well. Please someone help me with an idea on how to figure it out. Thanks.
Here is the code to fetch the posts from JSON
<div class="w-full lg:w-3/4 mb-7 p-1">
<div class="max-w-md bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl mb-6" v-for="post in posts" :key="post.id">
<div class="flex">
<div class="shrink-0">
<img class="h-28 w-full object-cover md:h-full md:w-28" src="../assets/img.png" alt="Man looking at item at a store">
</div>
<div class="pl-4 pt-2">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">{{post.cat}}</div>
<router-link :to="{name: 'PostDetails', params:{id: post.id} }">
<h1 class="block mt-1 text-lg leading-tight font-medium text-black hover:underline font-bold">{{post.title}}</h1>
</router-link>
<!-- <p class="mt-2 text-slate-500">Getting a new business off the ground is a lot of hard work.</p> -->
</div>
</div>
</div>
</div>
JS
<script>
export defualt {
data(){
return{
posts:[]
}
},
mounted(){
fetch('http://localhost:3000/posts')
.then(res => res.json())
.then(data => this.posts = data)
.catch(err => console.log(error.message))
}
}
</script>
Code to display posts details
<template>
<h1>Current Post You Are reading</h1>
<div v-if="post">
<p>The Post Id is {{id}}</p>
<h1>{{post.title}}</h1>
</div>
Js
<script>
export default {
props:['id'],
data(){
return{
post: null
}
},
mounted(){
fetch('http://localhost:3000/posts/' + this.id)
.then(res => res.json())
.then(data => this.post = data)
.catch(err => console.log(error.message))
}
}
The Outcome

Answer 1

I think my sample will help you,
PostList.vue
<template>
<div>
<div v-for="item in posts" :key="item.id">
<router-link :to="'/postdetails/'+item.id">{{item.first_name}}</router-link>
<h1>{{item.first_name}}</h1>
<h2>{{item.last_name}}</h2>
<div>{{item.email}}</div>
<div>
<img v-bind:src="item.avatar" alt="">
</div>
</div>
</div>
</template>
<script>
export default {
name: 'PostList',
data() {
return {
posts: []
}
},
created() {
fetch('https://reqres.in/api/users')
.then(res => res.json())
.then(data => {
this.posts = data.data
console.log("this.posts", this.posts)
})
.catch(err => console.log(err))
}
}
</script>
PostDetails.vue
<template>
<div>
<div v-for="item in posts" :key="item.id">
<h1>{{ item.first_name }}</h1>
<h2>{{ item.last_name }}</h2>
<div>{{ item.email }}</div>
<div>
<img v-bind:src="item.avatar" alt="" />
</div>
</div>
</div>
</template>
<script>
export default {
name: "PostDetails",
data() {
return {
msg: "welcome to PostList page",
posts: [],
id: this.$route.params && this.$route.params.id,
};
},
created() {
fetch("https://reqres.in/api/users/" + this.id)
.then((res) => res.json())
.then((data) => {
this.posts = data;
})
.catch((err) => console.log(err));
},
};
</script>
And in router index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '#/components/HelloWorld'
import PostList from '#/components/PostList'
import PostDetails from '#/components/PostDetails'
Vue.use(Router)
export default new Router(
{ routes: [
{ path: '/', redirect: { name:'PostList' }},
{ path: '/postlist', name: 'PostList', component: PostList },
{ path: '/postdetails/:id', name: 'PostDetails', component: PostDetails }
]}
)