vue-router doesn't recognize $ref from a component after routing - vue.js

Question

I'm new with Vuejs and vue-router I've been reading a lot View documentation and forums to figure this out.
I can make my routing working well. But I can't (easily) the "ref" from the content that was routed.
I say "easily" because I found on "this.$children[0].$children[0].$refs" which doesn't look correct to me and also difficult to maintain.
What I would like is to have easy way like "this.$refs" or "this.router["foo"].$refs".
I'll paste the vue documentation basic example with "ref" in the elements.
HTML
<div id="app">
<h1 ref="myrefInitial">Hello App!</h1>
<p>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<router-view></router-view>
<p>
refs founds: {{getAllRefs}}
</p>
</div>
<script src="index.js"></script>
JS
const Foo = {
template: '<div ref="myrefFoo">foo</div>'
}
const Bar = {
template: '<div ref="myrefBar">bar</div>'
}
const routes = [{
path: '/foo',
component: Foo
},
{
path: '/bar',
component: Bar
}
]
const router = new VueRouter({
routes // short for `routes: routes`
})
router.afterEach((to, from) => {
console.log("going to " + to.fullPath)
console.log(to);
router.app.getAllRefs();
})
const app = new Vue({
router,
computed: {
getAllRefs: function(){
return this.$refs
}
}
}).$mount('#app')
JsFiddle example
https://jsfiddle.net/3rdSenna/kaqqsrob/

Answer 1

In the end I wrote a simple For loop to dig on every $refs and find the child $refs name until is matched. It solved my problem.
But I believe the suggestion from #rinatdobr would suite me well.