Error in mounted hook: "TypeError: this.$refs.list.$el.refresh is not a function"

在子组件scroll.vue中的methods选项中定义方法refresh()，如下所示：

//当已经存在berre-scroll实例的时候，DOM发生变化时，要对better-scroll实例重新更新  
refresh() {  
  this.scroll && this.scroll.refresh()  
} 

然后在父组件music-list.vue中的template调用子组件scroll

<scroll ref="list" @scroll="scroll" :data="songs" :probeType="probeType" :listenScroll="listenScroll" class="list">  

接着在父组件music-list.vue中的methods中定义方法handlePlaylist()，在里面调用子组件的方法refresh()

 this.$refs.list.$el.refresh()

然后报错：大致意思是说function()不是一个函数，但是明明在子组件中已经定义了

TypeError: this.$refs.list.$el.refresh is not a function
    at VueComponent.handlePlaylist (music-list.vue?f694:81)
    at VueComponent.mounted (mixin.js?98c1:14)
    at callHook (vue.esm.js?efeb:2921)
    at insert (vue.esm.js?efeb:4158)
    at Object.invoker [as insert] (vue.esm.js?efeb:2023)
    at invokeInsertHook (vue.esm.js?efeb:5960)
    at VueComponent.patch [as __patch__] (vue.esm.js?efeb:6179)
    at VueComponent.Vue._update (vue.esm.js?efeb:2670)
    at VueComponent.updateComponent (vue.esm.js?efeb:2788)
    at Watcher.get (vue.esm.js?efeb:3142)

分析：通过this.$refs.list.$el是拿到子组件的DOM对象，因此不能调用javascript里面定义的方法

解决方法：通过this.$refs.list是拿到子组件对象，拿到这个对象之后就可以调用子组件的方法了

 this.$refs.list.refresh()

其实对于this.$refs.list.$el和this.$refs.list的区别也不是很明白，希望有高人指点