title: How to get data to work when used within a component and Axios?
body: <p>I'm new to <code>Vue.js</code> and <code>Axios</code>. I don't quite understand how to get the <code>data</code> option to work when used within a component.</p>
  <p><strong>Why doesnt' my test work?</strong></p>
  <p>I get the following error in the console:</p>
  <blockquote>
  <pre><code>[Vue warn]: The &quot;data&quot; option should be a function that returns a per-instance value in component definitions.
  
  [Vue warn]: Property or method &quot;symbols&quot; 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)
  </code></pre>
  </blockquote>
  <p>My simple test:</p>
  <p><strong>My data</strong> (snipped for brevity):</p>
  <pre class="lang-js prettyprint-override"><code>[{&quot;id&quot;:1, &quot;name&quot;: &quot;Airfield&quot;}, {&quot;id&quot;:2, &quot;name&quot;: &quot;Ship Yard&quot;}]
  </code></pre>
  <p><strong>My component:</strong></p>
  <pre class="lang-js prettyprint-override"><code>Vue.component('symbols-table', {
      template: '&lt;h1&gt;Hello World&lt;/h1&gt;',
      data: {
          symbols: []
       },
       created: function(){
           axios.get('symbols.json').then(response =&gt; this.symbols = response.data);
        }
  });
  </code></pre>
  <p><strong>Vue instance</strong>:</p>
  <pre class="lang-js prettyprint-override"><code>var app = new Vue({ el: '#app' });
  </code></pre>
  <p><strong>My HTML</strong>:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;symbols-table&gt;
      &lt;ul&gt;&lt;li v-for=&quot;symbol in symbols&quot;&gt;{{symbol.name}}&lt;/li&gt;&lt;/ul&gt;
  &lt;/symbols-table&gt;
  </code></pre>