Why does the data from the API stop showing after page reload?

Question

Vue.js

In Vuex, I get an array of data from the API and display it in the charts.vue component. Reactively they are displayed, but after reloading the page everything disappears, and in the console an error: [Vue warn]: Error in data(): "TypeError: Cannot read property 'data' of undefined". What could be the problem?

PS: Newbie in Frontend development

VUEX:

export default new Vuex.Store({
    state: {
        data: []
    },
    mutations: {
        SET_DATA: (state, values) => {
            state.data = values
        },

    },
    actions: {
        GET_DATA({commit}) {
            return axious.get('https://test-task-for-frontend.herokuapp.com/data')
        .then(response=>{
            commit('SET_DATA', response.data.items)
        })
        }
    },
    getters: {
        DATA(state) {
            return state.data
        },
},
 })

CHARTS.VUE:

<template>
    <div>
    <highcharts :constructorType="'stockChart'" class="hc" :options="chartOptions" ref="chart"></highcharts>
  </div>
</template>

<script>
import {mapActions, mapGetters} from 'vuex'
import Highcharts from 'highcharts'
import stockInit from 'highcharts/modules/stock'

stockInit(Highcharts)
export default {
  props: {
    request: {}
  },
 data() {
  return {
    title: '',
    points: [10, 0, 8, 2, 6, 4, 5, 5],
    chartType: 'Spline',
    seriesColor: '#6fcd98',
    colorInputIsSupported: null,
    chartOptions: {
      rangeSelector: {
        verticalAlign: 'bottom',
        x: 0,
        y: 0,

        
},
      chart: {
        type: 'spline'
      },
      title: {
        text: 'Statistic'
      },
      yAxis: {
        title: {
                    text: 'VALUE'
                },
        
      },
      xAxis: {
        title: {
                    text: 'DATE'
                },
        categories: []
      },
      legend: {
        
      },
      series: [{
        name: 'queries',
        data: this.request[0].data.map(e=>e.value)
      },
      
      {
        name: 'groups',
        data: this.request[1].data.map(e=>e.value)
      },

      {
        name: 'documents',
        data: this.request[2].data.map(e=>e.value)
      },

      {
        name: 'categories',
        data: this.request[3].data.map(e=>e.value)
      }
      ]
    }
  }
},

  computed: {
    ...mapGetters([
      'DATA'
    ])
  },
  methods : {
    ...mapActions([
      'GET_DATA', 
      ]),

    
  },
  mounted() {
    return this.GET_DATA()
  },
  }
</script>

APP.VUE

<template>
  <div>
    <charts :request="DATA"
    />
    <v-table
      :request_data="DATA"
    />
  </div> 
</template>

<script>
import {mapActions, mapGetters} from 'vuex'
import VTable from './components/v-table'
import Charts from './components/charts'

export default {
  
  components: {
    VTable, Charts
  },
  computed: {
    ...mapGetters([
      'DATA'
    ])
  },
  methods : {
    ...mapActions([
      'GET_DATA'
      ]),

    
  },

  mounted() {
    return this.GET_DATA()
    
  }
  
  }
</script>

Answer 1

Write in mounted () the launch of the SET_DATA action
in general, of course, the code of the component itself is also needed

Answer 2

And what about the DATA getter? Array or object?
I think it's about the graphics.
It is worth pressing the :key directive and v-if too

<highcharts v-if="DATA.length" :key="DATA.length" :constructorType="'stockChart'" class="hc" :options="chartOptions" ref="chart"></highcharts>

So that after changing the length of the DATA array (when the data appeared), the chart would be re-rendered.
And to be shown when there is data at all, in principle.