How to get component props data in script side

Get Help
#1

I am try to get the props data when mounted but I cant get it, it just return undefined. In html loaded Passdata success, so how can i get the data in script side?
sample here >>>sandbox

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 in CodeSandbox!" />
  <TestHome :PassData="PassData" />
</template>

<script>
import HelloWorldVue from "./components/HelloWorld.vue";
import TestHomeVue from "./components/TestHome.vue";
export default {
  name: "App",
  components: {
    HelloWorld: HelloWorldVue,
    TestHome: TestHomeVue,
  },
  props: {
    PassData: String,
  },
  mounted(){
    console.log(this.PassData);
  }
};
</script>
#2

In the mounted lifecycle hook, the component hasn’t yet been fully rendered and the props haven’t been passed down to the child component yet.
You can try accessing the prop data in the “created” lifecycle hook instead of “mounted”. The “created” hook is called after the component has been created and before it has been mounted to the DOM, so the props should be available at that point.

export default {
  name: "App",
  components: {
    HelloWorld: HelloWorldVue,
    TestHome: TestHomeVue,
  },
  props: {
    PassData: String,
  },
  created() {
    console.log(this.PassData);
  }
};

Another option is to access the prop data in the TestHome component, where you are passing the prop down. By doing this you can ensure that the prop is already available and it’s not undefined.

<template>
  <div>
    <p>{{ PassData }}</p>
  </div>
</template>

<script>
export default {
  name: "TestHome",
  props: {
    PassData: String,
  },
  mounted() {
    console.log(this.PassData);
  }
};
</script>