Passing data to component and use it inside that component data function

Question

I'm passing data to a component and I'm able to get this data from props. But I want to pass this data to the component data function as well.

Here is parent code:

<template>
  <div>
    <post v-for="(post, key) in posts" :key="key" :post="post" />
  </div>
</template>

<script>
import post from './components/post';

export default{
  components: {
    post
  },
  data(){
    return{
      posts: [{/*Posts*/}]
    }
  }
}
</script>

Component code:

<template>
  <div :post="post">
    <span>{{ post.title }}</span>
  </div>
</template>

<script>
export default{
  props: ['post'],
}
</script>

I tried to add:

data(){
  return{
    status: post.status
  }
}

to the component after props. But I got an error post not defined in data

I tried to search about it but didn't find a solution

Answer 1

In child component:

<template>
  <!-- <div :post="post"> you don't send post here, you receive it thru props-->
  <div>
    <span>{{ post.title }}</span>
  </div>
</template>

then in data use props:

data(){
  return{
    status: this.post.status
  }
}