VueJS component ref component is not accessible at all - vue.js

Question

I don't understand the refs when using in Vue component. It is not working properly.. I have two files
show.vue
<template>
<div>
<b-container fluid class="bg-white" v-if="$refs.chart">
<b-row class="topTab types">
<b-col
:class="{ active: currentTab === index }"
v-for="(tabDisplay, index) in $refs.chart.tabDisplays"
:key="index"
>
<router-link
:to="{ query: { period: $route.query.period, tab: index } }"
>
{{ tabDisplay }}
</router-link>
</b-col>
</b-row>
</b-container>
<component v-bind:is="currentGame" ref="chart" />
</div>
</template>
<script>
export default {
computed: {
currentGame() {
return () =>
import(
`#/components/Trend/example/Charts/${this.group}/${this.id}/Base.vue`
);
},
}
};
</script>
Base.vue
<template>
<div>
dadsas
</div>
</template>
<script>
export default {
data: function() {
return {
tabDisplays: {
1: "example1",
2: "example2",
3: "example3",
4: "example4"
}
};
}
};
</script>
Take note that the second file renders properly showing the dasdas but the $refs.chart.tabDisplays is not. It will only show when I change something inside the <script> tag like adding 5: "example5" in the tabDisplays data then if I refresh it will be gone again. Basically, I just want to access the computed property of my child component. I am very aware I can use vuex but I want to try accessing a component's computed property via ref. What is wrong with my $.refs.chart?

Answer 1

As I noted in my comment, refs are only populated after rendering, so you won't have access to them during rendering. This is mentioned in the docs, see https://v2.vuejs.org/v2/api/#ref. The child component doesn't exist at the point you're trying to access it. The rendering process is responsible for creating the child components, it all gets a bit circular if you try to access them during that rendering process.
It looks like you've already made several key design decisions here about how to structure your application, such as component boundaries and data ownership, and those decisions are making it difficult to get where you want to be. It's not easy to make concrete suggestions about how to fix that based purely on the code provided.
So instead I will attempt to suggest a minimal change that should fix the immediate problem you're having.
To access the property of the child you're going to need the parent component to render twice. The first time it will create the chart and the second time it will have the relevant property available. One way to do this would be to copy the relevant property to the parent after rendering.
<template>
<div>
<b-container fluid class="bg-white" v-if="tabDisplays">
<b-row class="topTab types">
<b-col
:class="{ active: currentTab === index }"
v-for="(tabDisplay, index) in tabDisplays"
:key="index"
>
<router-link
:to="{ query: { period: $route.query.period, tab: index } }"
>
{{ tabDisplay }}
</router-link>
</b-col>
</b-row>
</b-container>
<component v-bind:is="currentGame" ref="chart" />
</div>
</template>
<script>
export default {
data () {
return { tabDisplays: null };
},
computed: {
currentGame() {
return () =>
import(
`#/components/Trend/example/Charts/${this.group}/${this.id}/Base.vue`
);
},
},
mounted () {
this.tabDisplays = this.$refs.chart.tabDisplays;
},
updated () {
this.tabDisplays = this.$refs.chart.tabDisplays;
}
};
</script>
In the code above I've introduced a tabDisplays property and that is then being synced with the child in mounted and updated. Within the template there's no reference to $refs at all.
While this should work I would repeat my earlier point that the 'correct' solution probably involves more significant changes. Syncing data up to a parent like this is not a normal Vue pattern and strongly suggests an architectural failure of some kind.

Answer 2

This is based on #skirtle's answer. I just made a few tweaks in his answer to produce what I really want
show.vue
<template>
<div>
<b-container fluid class="bg-white" v-if="chart">
<b-row class="topTab types">
<b-col
:class="{ active: currentTab === index }"
v-for="(tabDisplay, index) in chart.tabDisplays"
:key="index"
>
<router-link
:to="{ query: { period: $route.query.period, tab: index } }"
>
{{ tabDisplay }}
</router-link>
</b-col>
</b-row>
</b-container>
<component v-bind:is="currentGame" ref="chart" />
</div>
</template>
<script>
export default {
data: function() {
return {
chart: undefined
};
},
computed: {
currentGame() {
return () =>
import(
`#/components/Trend/高频彩/Charts/${this.group}/${this.id}/Base.vue`
);
},
},
updated() {
this.chart = this.$refs.chart;
}
};
</script>