我在这里遇到的问题是，即使reporting.type == 'yes'或this.$refs.opportunities的值返回为未定义，this.$refs.leaders也返回为未定义，即使reporting.type == 'no'
this.$refs只显示了reportingForm，没有显示其他组件，请帮助我查找错误所在

<template>
      <div>
        <v-card>
          <v-form :model='reporting' ref='reportingForm'>
            
            <v-radio-group v-model="reporting.type"
                            :mandatory="true"
                            class="referral-radios">
              <v-radio label="True" :value="'yes'" class="referral-radio"></v-radio>
              <v-radio label='False' :value="'no'" class="referral-radio"></v-radio>
            </v-radio-group>
          </v-form>
        </v-card>
        <div>
          <LeadsResults v-if="reporting.type == 'yes'"
                        :ref="leaders">
          </LeadsResults>
          <OpportunitiesResults
                        v-if="reporting.type == 'no'"
                        :ref="opportunities">
    
          </OpportunitiesResults>
        </div>
      </div>
    </template>
    
    <script>
    import LeadsResults from 'views/leads_results.vue'
    import OpportunitiesResults from 'views/opportunities_results.vue'
    export default {
      components: {
        LeadsResults,
        OpportunitiesResults,
      },
      data () {
        return {
          reporting: {
            type: ''
          }
        }
      },
      watch: {
        'reporting.type': function (value) {
          if (value == 'yes') {
            console.log(this.$refs.leaders)
            //undefined
          }
          else if (value == 'no') {
            console.log(this.$refs.opportunities)
            //undefined
          }
        }
      }
    };
    </script>