Unable to pass props to the child component in Vue js

Question

I spent almost 2 hours figuring out but I am not getting what am I doing wrong. I am simply getting data in my parent component and then passing it to my child component and in my child component I am using props to get that component but I am not getting anything. FYI I am receiving all of my data in my parent component if I console.log it's just not in my child component.

This is my Parent component:

    <template>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <div class="about2">
          <h1>What I do</h1>
          <StudyCard :studies="data.studycards" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import StudyCard from "@/components/StudyCard.vue";
import data from "../assets/data.json";
export default {
  components: {
    StudyCard,
  },
  data() {
    return {
      data,
    };
  },
};
console.log(data.studycards);
</script>

This is the script of my child component: (this is the only thing you need since this is giving the problem)

<script>
export default {
  props: ["studies"],
};
console.log(studies); //This line is an error 
</script>

Thank you for solving the problem.

Answer 1

The issue is that you're accessing the props outside of the method or life cycle hooks.

<script>
export default {
  props: ["studies"],
  mounted() {
    console.log(this.studies); 
  }
};
</script>