【Vue.js】サーバーから取得したデータを子コンポーネントに反映させたい

Question

サーバーから取得したデータを子コンポーネントにpropsで渡してデータを表示したいのですが、サーバーからデータを取得する前に描写されてしまうため、値が反映されません。

解決策として、　refs属性を使って親から子のメソッドを実行するようにしたのですが、うまく機能しません。
この方法でなくてもいいので、何かあれば教えていただきたいです。

Birthdayが該当のコンポーネントです

親コンポーネント

<template lang="pug">
    .application
        .contents-application.contents-box
            h1.title-application.txt.txt-headline {{ talentName }}
            ValidationObserver( ref="form")
                form.form-app(@submit.prevent="onSubmit")
                    h1.medium-title-application.txt.txt-medium 申込者の情報
                    Birthday(
                        ref="birthday"
                        :maxAge="70"
                        :minAge="12"
                        @year="putBirthdayYear"
                        @month="putBirthdayMonth"
                        @day="putBirthdayDay"
                        :inputedYear="birthdayYear"
                        :inputedMonth="birthMonth"
                        :inputedDay="birthday"
                    )
</template>

<script lang="ts">
import Vue from "vue";
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import TextInput from "@/components/TextInput.vue";
import RoundRectButton from "@/components/RoundRectButton.vue";
import Gender from "./components/Gender.vue";
import Birthday from "./components/Birthday.vue";
export type DataType = {
    birthdayYear: number;
    birthdayMonth: number;
    birthdayDay: number;
};
export default Vue.extend({
    name: "Application",
    components: {
        Header,
        Footer,
        TextInput,
        Gender,
        Birthday,
        RoundRectButton,
        ValidationObserver,
        ValidationProvider,
    },
    data(): DataType {
        return {
            birthdayYear: 0,
            birthdayMonth: 0,
            birthdayDay: 0,
     
        };
    },
    // ビルド時に前回の入力値が入るようにgetRequestを呼び出す。
    created() {
        this.getRequest();
        this.refs.birthday.setBirthday();
    },
    computed: {
      // TypeScriptだと読み込めないため実行
        refs(): any {
            return this.$refs;
        },
    },
    methods: {
        async getRequest() {
            const r = await this.$repositories.RequestDraftRepository.getRequestDraft();
            this.birthdayYear = r.birthdayYear;
            this.birthdayMonth = r.birthdayMonth;
            this.birthdayDay = r.birthdayDay;
 
        },
    },
});
</script>

<template lang="pug">
    .birthday
        .title-birthday.txt 生年月日
        .box-birthday
            ValidationProvider(name="year" rules="required|validateBirthday:@month,@day" v-slot="{ errors }")
                select.year-box(v-model="year" @change="$emit('year', year)")
                    option(v-for="y in getYears" :value="y") {{ y }}
                p.error {{ errors[0] }}
            .year-birthday.txt.txt-detail 年
            ValidationProvider.vali(name="month" rules="required" v-slot="{ errors }")
                select.month-box(name="month" v-model="month" @change="$emit('month', month)" key="input-eamli")
                    option(disabled value='') --
                    option(v-for="m in getMonths" :value="m") {{ m }}
                    //- option {{ selectMonth }}
            .month-birthday.txt.txt-detail 月
            ValidationProvider(name="day" rules="required" v-slot="{ errors }")
                select.day-box(name="day" v-model="day" @change="$emit('day', day)") 
                    option(disabled value='') --
                    option(v-for="d in getDays" :value="d") {{ d }}
            .day-birthday.txt.txt-detail 日
        //- p.error(v-if="errors[0]") 正しく入力してください

</template>

<script lang="ts">
import Vue, { PropType } from "vue";
import { extend, ValidationProvider } from "vee-validate";
import { required } from "vee-validate/dist/rules";
extend("required", required);
const birthdayRule = {
    params: ["month", "day"],
    message: "生年月日が正しく入力されていません",
    validate(value: string, { month, day }: any) {
        if (value != "" && month != "" && day != "") {
            return true;
        }
        return false;
    },
};
extend("validateBirthday", birthdayRule);
export type DataType = {
    year: number;
    month: string | number;
    day: string | number;
    msg: string;
};
export default Vue.extend({
    name: "Birthday",
    data(): DataType {
        return {
            year: 1980,
            month: "",
            day: "",
            msg: "",
        };
    },
    components: {
        ValidationProvider,
    },
    methods: {
        setBirthday() {
            console.log("しっぱい");
            this.year = this.inputedYear;
            this.month = this.inputedMonth;
            this.day = this.inputedDay;
            console.log(this.day);
        },
    },
    props: {
        maxAge: {
            type: Number as PropType<number>,
            required: true,
        },
        minAge: {
            type: Number as PropType<number>,
            required: true,
        },
        inputedYear: {
            type: Number as PropType<number>,
            required: true,
        },
        inputedMonth: {
            type: Number as PropType<number>,
            required: true,
        },
        inputedDay: {
            type: Number as PropType<number>,
            required: true,
        },
    },
});
</script>