Getting undefined parrameters i passed from another component - ruby-on-rails

Question

Okay, so, i have this Post component and i want to pass the id to the postView component, and then from there to the postPage, the problem is whatever i pass it gives me undefined, as im new to vue i have been bashing my head about this a whole day and have no idea how to go around it.
Thanks in forward!
Post component:
<template>
<div class="mb-3">
<ul v-for="post in posts" :key="post.id">
<div #click="goToPost(post.id)" class="byPost card">
<li class="card-tittle">{{ post.headline }}</li>
<li class="card-text">{{ post.description }}</li>
</div>
</ul>
</div>
</template>
<script>
import axios from "axios";
export default {
props: ["endpoint"],
data() {
return {
posts: [],
};
},
methods: {
goToPost(id){
this.$router.push({ name: 'post', params: { id } });
}
},
mounted() {
axios
.get(this.endpoint)
.then((response) => (this.posts = response.data))
.catch((error) => console.log(error));
},
};
</script>
PostView component:
<template>
<div class="home">
<PostPage
:headline="post.headline"
:description="post.description"
:likes="post.likes"
:topic="post.topic"
/>
</div>
</template>
<script>
import PostPage from "#/components/pages/post-page.vue";
import axios from "axios";
export default {
name: "Post",
data() {
return {
id: this.$route.params.id,
post: {}
};
},
components: {
PostPage,
},
mounted(){
axios.get(`http://localhost:3000/api/project_pages/${this.id}`)
.then(response => (this.post = response.data))
.catch(error => console.log(error));
}
};
</script>
First started by making the axios call in the post component, didn't go as it will do a good backend call and give me 200ok, but when passed to the postView i would get undefined, if anyone can help im open to hear it!