How to get data to work when used within a component and Axios?

data inside a Vue Component should be a function that returns an object, as described in the Vue.js common gotchas.


As the error is saying:

The "data" option should be a function

In the component, the data must be a function, you need to modify the data block to be a function which will return the data structure to be used in DOM in a reactive way:

Vue.component('symbols-table', {
    template: '<h1>Hello World</h1>',
    data: function() {
         return  {
           symbols: []
         }
    },
    created: function(){
        axios.get('symbols.json').then(response => this.symbols = response.data);
    }
});

You can type simply like this:

data() {
    return {
        ...... tra-ta-ta.......
    }
},