Vue $refs控制台能输出却不能进行操作显示undefined

vue $refs 能在控制台输出却拿不到值

// An highlighted bloc
console.log(this.$refs.childen)
console.log(this.$refs.childen.test)

// A code block
{childen}
undefined

遇到这种可以使用watch，在watch中监听一个值的变化

// An highlighted block
data(){
  return{
  transition:""
  }
}
watch(){
  transition(){
    this.$nextTick(()=>{
      this.$res.childen//就能拿到并进行自己的逻辑
    })
  }
}
methods:{
  test(data){
    this.transition = t
    console.log(this.$refs.childen)// 能拿到却不能操作
    console.log(this.$refs.childen.test)}
}

个人理解，希望能您能对你有点作用