This.$refs.xxx will be set to "undefined" after switch back from another route

I want to refresh a vuetable component in my vue with vue-router app, and set its “ref” to “vueTable”. The refresh action is taken in a method like:
this.$nextTick(() => {
this.$refs.vueTable.refresh()
})
When the page is load by directly enter url in brower, or first switch in from another route, it works well. But when I switch out and then switch back from aother route, this.$refs.vueTabe will be set to “undefined”.
It is interesting that the vuetable can be refreshed properly, but there will be warning in browser says:
Error in nextTick: “TypeError: Cannot read property ‘refresh’ of undefined”
I am confused. Any one can help me? Thanks!

I think nextTick() should do the trick but it might be that the code is not executed. Where is it located?
Try placing it in a suitable navigation guard and make sure it’s actually executed.

It is located in “methods” block, and is called by a button click event. If I remove it , the table would not been refreshed, so it does works. But I want to know how "this.$refs.vueTable " is set to “undefined” & why the “vueTable” can still be refreshed.