Data received in child as props is empty - vue.js

Question

I'm making call to json from parent and sending the resulted data to child as props.
But in child data is coming as zero.
parent.vue
<template>
<subscriberGraph :propSubData="subData" /> // child component
</template>
<script>
data() {
return {
subData: [] // subData declaration
};
},
methods: {
async getSubscribers() {
this.subData = await d3.json("./data/subscribers.json"); // calling json
console.log("1: ", this.subData); // variable is declared in this file and data is getting displayed here,
}
},
mounted() {
this.getSubscribers();
}
</script>
Below is child component.
subscriberGraph.vue
<script>
export default {
mounted() {
console.log("2: ", this.propSubData); // data length: 0
}
props: ["propSubData"]
</script>
EDIT: subData is already declared, that's what i've mentioned in the comment beside console.log("1"...). anyway updating the code above pls check.

Answer 1

You have to initialise the subData in the data section to use it. Since it will take time to get response from the request, you can use v-if condition while the child component is calling. This will prevent rendering the child component before the response is set.
<template>
<subscriberGraph :propSubData="subData" v-if="subData && subData.length>0" /> // child component
</template>
<script>
export default {
data:()=>{
return {
subData:null
}
},
methods: {
async getSubscribers() {
this.subData = await d3.json("./data/subscribers.json"); // calling json
console.log("1: ", this.subData); // variable is declared in this file and data is getting displayed here,
}
},
mounted() {
this.getSubscribers();
}
}

Answer 2

adding a watch{} solved the issue.
subscriberGraph.vue
<script>
export default {
methods: {
drawBarGraph(data) {
console.log("3: ", data); // working now !!
}
},
mounted() {
this.drawBarGraph(this.propSubData);
},
props: ["propSubData"],
watch: {
propSubData: function(newData) {
this.drawBarGraph(newData);
}
}
</script>
you need to watch changes, initially you won't get data because child comp has not yet received data when mounted. Later, when data is received, watch{} observes and updates data, hence data is now available in drawBarGraph().