Post not showing all content in Vue.js app - node.js

Question

I'm building my first Vue app, most of it works fine, but when I click in a post to open the selected post, it doesn't show properly ( Image, title and content don't show ) in the post page, it show the card with the buttons but not the other content, everything shows in home page.
I hope some kind soul can show me some light...
P.S. I'm a beginner so simple terms would be appreciated.
This is my Home page.
<template>
<v-container>
<v-alert border="left" close-text="Close Alert" color="green accent-4" dark dismissible v-if="this.$route.params.message">
{{ this.$route.params.message }}
</v-alert>
<v-row no-gutters>
<v-col sm="4" class="pa-3" v-for="post in posts" :key="post._id">
<v-card class="pa-1" :to="{ name: 'post', params: { id: post._id } }">
<v-img height="250" :src="`/${post.image}`"></v-img>
<v-btn class="ml-4 mt-3" small outlined color="indigo">
{{ post.category }}
</v-btn>
<v-card-title class="headline">
{{ post.title }}
</v-card-title>
<v-card-text class="py-0">
{{ post.content.substring(0, 100) + '...' }}
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
import API from '../api'
export default {
name: 'Home',
data() {
return {
posts: [],
};
},
async created() {
this.posts = await API.getAllPost();
}
};
</script>
and this is my post page
<template>
<v-container>
<v-row no-gutters>
<v-col sm="10" class="pa-4 mx-auto">
<v-card class="pa-2">
<v-img :src="`${ post.image }`"></v-img>
<v-card-actions class="pb-0">
<v-row class="mt-1 mx-1">
<v-col sm="2">
<v-btn small outlined color="primary">{{ post.category }}</v-btn>
</v-col>
<v-col sm="10" class="d-flex justify-end">
<v-btn color="success" text :to="{ name: 'edit-post', params: { id: post._id } }">Edit</v-btn>
<v-btn color="red" text #click="deletePost(post._id)">Delete</v-btn>
</v-col>
</v-row>
</v-card-actions>
<v-card-subtitle class="headline">
<h3>{{ post.title }}</h3>
</v-card-subtitle>
<v-card-text class="grey--text">
<p>{{ post.content }}</p>
<p>{{ post.created }}</p>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
import API from '../api';
export default {
data() {
return {
post: {},
};
},
async created(){
const response = await API.getPostByID(this.$route.params.id);
this.post = response;
},
methods: {
async deletePost(id) {
const response = await API.deletePost(id);
this.$router.push({ name: 'Home', params: { message: response.message } });
},
},
}
</script>