Highcharts this.$refs undefined in mounted

[poloma]

I'm trying to add data once the component is mounted by accessing this.$refs.highcharts but Vue says it's undefined

methods: {
  updateChartData () {
    const { chart } = this.$refs.highcharts
    chart.series[0].setData(this.chartData, true)
  }
},
mounted () {
  this.updateChartData()
}

Error in mounted hook: "TypeError: Cannot read property 'chart' of undefined"'

Any ideas? Or better way of initializing data with a calculated field.

[weizhenye]

Do you forgot to write the ref props?

<highcharts :options="options" ref="highcharts"></highcharts>

[poloma]

No, I am able to update the ref on a click but it seems the ref is just not available during the mounted hook.

[weizhenye]

Is your <highcharts> controlled by v-if which is shown at next tick? Child component should be mounted before parent component. Could you provide a minimal example to reproduce it?

[poloma]

@weizhenye Thank you that was it! My mistake.