在组件和Axios中使用时如何使数据工作？

我是新来的Vue.js和Axios。我不太了解如何data在组件中使用该选项。

为什么我的测试不起作用？

我在控制台中收到以下错误：

[Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions.

[Vue warn]: Property or method "symbols" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance)

我的简单测试：

我的数据（为简洁起见，略）：

[{"id":1, "name": "Airfield"}, {"id":2, "name": "Ship Yard"}]

我的组件：

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

Vue实例：

var app = new Vue({ el: '#app' });

我的HTML：

<symbols-table>
    <ul><li v-for="symbol in symbols">{{symbol.name}}</li></ul>
</symbols-table>