How to pass data using v-bind from view to component?

I wanted to pass a data from my database using v-bind and send the data to my component. I already tried iterating through my database using v-for in my template, however it prevents me from accessing the component when the database is empty and if it's not empty, it just fetch the first data ID in my database. I am using Parse and Mongodb as my database.

Here's my code below:

//Room.vue (View file)
<template>
   <PModal @close="toggleModal" @create="postAnnouncement()" v-bind:value="this.post_id">
    <p>{{ this.post_id }}</p>
    ...
    ...
   </PModal>
</template>

<script>
import Parse from 'parse';
import PModal from '@components/PModal.vue';
export default{
   components: { PModal }
   data(){
      return{
        post_id: '',
      }

   },
   methods: {
      postAnnouncement(){
        const Posts = Parse.Object.extend("Posts");
        const post = new Posts();

        ...
        post.save().then((post) => {
           this.post_id = `${post.id}`;
        }, (error) => {
            alert(`Failed to create announcement: ${error.message}`);
        });
     }
   },
}
</script>

And here's my code for my component:

//PModal.vue (component file)
<template>
   <button id="cancelBtn" class="float-right mt-6" @click="$emit('close')">Cancel</button>
   <button id="createBtn" class="float-left mt-6"@click="$emit('create')">Create</button>
</template>

<script>
export default{
  props: ['value`],
  data(){
    return {
      post_url: this.value,
    }
  },
  methods: {
     closeModal(){
       this.$emit('close')
     },
     createPost(){
       console.log("this is the passed ID:", this.post_url);
       this.$emit('create')
     },
  },
}
</script>

Is there something I'm overlooking here? Or are there any alternative methods for sending data from View to Component without using v-bind? Thank you in advance for anyone who helps!