来自子组件的$ ref始终在parent（vuejs）

Question

由于某种原因，当尝试获取子组件的ref时，即使在稍后才请求它，然后挂载和创建的生命周期事件，我也变得不确定。 这是子组件：

<template>
  <div>
    <div class="form-row">
      <label>Season</label>
      <select placeholder="Season" v-model="semester.Season">
          <option v-for="s in seasons" :value="s.key">{{s.key}}</option>
      </select>
    </div>

    <div class="form-row">
      <div class="form-columns start-year-group">
        <div class="form-group" style="width:50%">
                <label>Start Month</label>
                <select v-model="StartMonth" @change="calculateStartDate('Month', $event.currentTarget.value)" placeholder="Start Month">
                    <option v-for="m in months" :value="m.value">{{m.key}}</option>
                </select>
            </div>
            <div class="form-group" style="width:50%">
                <label>Start Year</label>
                <select v-model="StartYear" @change="calculateStartDate('Year', $event.currentTarget.value)" placeholder="Start Year">
                    <option v-for="y in years" :value="y.key">{{y.key}}</option>
                </select>
            </div>
        </div>
      </div>

      <div class="form-row">
        <div class="form-columns end-year-group">
          <div class="form-group" style="width:50%">
                <label>End Month</label>
                <select v-model="EndMonth" @change="calculateEndDate('Month', $event.currentTarget.value)" placeholder="End Month">
                    <option v-for="m in months" :value="m.value">{{m.key}}</option>
                </select>
            </div>
            <div class="form-group" style="width:50%">
                <label>End Year</label>
                <select v-model="EndYear" @change="calculateEndDate('Year', $event.currentTarget.value)" placeholder="End Year">
                    <option v-for="y in years" :value="y.key">{{y.key}}</option>
                </select>
            </div>
          </div>
    </div>
  </div>
</template>

<script>
import { eMonth, eYear, eSeason } from '@/shared/lib/enums';

export default {
    name: 'SemesterForm',
    props: ['schoolID', 'sData', 'sessionSchool'],
    data () {
        var cYear = (new Date()).getFullYear();
        return {
            semester: {
                Season: 'Spring',
                StartDate: null,
                EndDate: null,
                SchoolID: null,
                Interactions: []
            },
            StartMonth: 0,
            StartYear: cYear,
            EndMonth: 5,
            EndYear: cYear
        };
    },
    mounted () {
        this.semester.SchoolID = this.schoolID || this.sessionSchool;
        this.semester.StartDate = this.calculateDate(this.StartYear, this.StartMonth);
        this.semester.EndDate = this.calculateDate(this.EndYear, this.EndMonth);
        if (this.sData) {
            Object.assign(this.semester, this.sData);
            this.StartMonth = this.sData.StartMonth;
            this.StartYear = this.sData.StartYear;
            this.EndMonth = this.sData.EndMonth;
            this.EndYear = this.sData.EndYear;
        }
    },
    computed: {
        seasons () {
            return eSeason.enums;
        },
        months () {
            return eMonth.enums;
        },
        years () {
            return eYear.enums;
        }
    },
    methods: {
        calculateStartDate (yearOrMonth, value) {
            var date;
            if (yearOrMonth === 'Year') {
                date = this.calculateDate(value, this.StartMonth);
            }
            else if (yearOrMonth === 'Month') {
                date = this.calculateDate(this.StartYear, value);
            }
            this.semester.StartDate = date;
        },
        calculateEndDate (yearOrMonth, value) {
            var date;
            if (yearOrMonth === 'Year') {
                date = this.calculateDate(value, this.EndMonth);
            }
            else if (yearOrMonth === 'Month') {
                date = this.calculateDate(this.EndYear, value);
            }
            this.semester.EndDate = date;
        },
        calculateDate (year, month) {
            return new Date(year, month, 1);
        }
    }

};
</script>

<style scoped>
.form-group{
  flex: 1;
}

</style>

这里是父组件，该组件除了向子对象提供的$ ref之外，几乎没有其他东西，然后是cancel / save选项：

<template>
    <div>
    <a href="#" class="btn btn--full btn--red" @click.prevent="toggleSemesterModal">Add Semester</a>
    <Modal :show="show" title="Add New Semester" name="Semester" width="500px" height="360px" @close="toggleSemesterModal">
        <template>
            <div>
                <semester-form ref="form" :schoolID="schoolID"></semester-form>
            </div>
            <footer>
                <a @click.prevent="save" class="btn btn pull-right" style="margin-left: 10px;">Save</a>
                <button href="#" class="btn btn pull-right"  style="margin-left: 10px;" @click="toggleSemesterModal">Cancel</button>
            </footer>
        </template>
    </Modal>
    </div>
</template>
<script>
import Modal from '@/shared/components/ui/modal';
import SemesterForm from './SemesterForm';

export default {
    name: 'NewSemester',
    data: () => ({
        semester: {},
        show: false
    }),
    props: ['schoolID'],
    components: { Modal, SemesterForm },
    methods: {
        toggleSemesterModal () {
            this.show = !this.show
        },
        save () {
            console.log(this.$refs); //undefined
            const semester = this.$refs.form.semester;

            console.log('need to save this data', {...semester});
            this.show = !this.show
        }
    }
};
</script>

<style scoped>
.
.
.
</style>