vue自定義組件ref報(bào)錯(cuò)

在使用自定義組件使用ref的時(shí)候，發(fā)現(xiàn)會(huì)報(bào)錯(cuò)，
當(dāng)正確的時(shí)候：點(diǎn)擊按鈕輸入框focus

 <div id="L4">
                <ref-component>
                </ref-component>
                
           </div>
           <script>
            Vue.component('ref-component',{
              template:`
                        <div>
                           <input ref="name" type="text">
                            <button  @click="focus">fouce</button>
                        </div>
                       `,
              methods:{
                focus:function(){
                this.$refs.name.focus()
                }
              }
            })
            new Vue({
              el:'#L4'
            })

但是將輸入框?qū)懭胍粋€(gè)子組件的時(shí)候再執(zhí)行按鈕事件，就會(huì)報(bào)錯(cuò)

     <div id="L4">
                <ref-component>
                </ref-component>
                
           </div>
           <script>
            Vue.component('ref-component',{
              template:`
                        <div>
                           <refs-component ref="name"></refs-component>
                            <button  @click="focus">fouce</button>
                        </div>
                       `,
              methods:{
                focus:function(){
                this.$refs.name.focus()
                }
              }
            })
            Vue.component('refs-component',{
              template:`<input type="text" />`
            })
            new Vue({
              el:'#L4'
            })
           </script>

報(bào)錯(cuò)是

請(qǐng)問(wèn)如何才能訪問(wèn)這個(gè)子組件的內(nèi)容呢？