vue2里面ref的具体使用方法

  Vue.component('navbar',{
    template:'
{{navs}}
',
    data:function () {
     return {
      navs:1
     }
    }
   });
  Vue.component('pagefooter',{
    template:'
{{footer}}
',
    data:function () {
     return {
      footer:11
     }
    }
   });

  

   
   
  
   new Vue({
    el:'#app',
    created:function(){
     
    },
    mounted:function () {
     this.$refs.navbar.navs=222
     //ready,
     //这里怎么直接访问navbar的navs和pagefooter的footer值呢，
      console.log(this.$refs.navbar.navs);
      console.log(this.$refs.pagefooter.footer);
    }
   })

document.querySelector('[ref=demo]');