title: Access array data with index in Vue template
body: <p>I'm having trouble accessing a data from an array using the index.</p>
  
  <p>I've the following code in my template.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="#" class="..."&gt;{{ fixture.flatOdds.data[0].market_id }}&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And that throws:</p>
  
  <pre><code>TypeError: fixture.flatOdds.data[0] is undefined
  </code></pre>
  
  <p>But fixture.flatOdds.data[0] is defined. When I print out the fixture.flatOdds.data[0] like this:</p>
  
  <pre><code>&lt;a href="#" class="..."&gt;{{ fixture.flatOdds.data[0] }}&lt;/a&gt;
  </code></pre>
  
  <p>It prints out the object just fine. The response,</p>
  
  <pre><code>{ "bookmaker_id": 2, "bookmaker_event_id": null, "market_id": 1, "odds": [ { "label": "1", "value": 3, "winning": null, "handicap": null, "total": null, "last_update": { "date": "2018-07-29 08:15:53.000000", "timezone_type": 3, "timezone": "UTC" } }, { "label": "X", "value": 3.2, "winning": null, "handicap": null, "total": null, "last_update": { "date": "2018-07-29 08:15:53.000000", "timezone_type": 3, "timezone": "UTC" } }, { "label": "2", "value": 2.38, "winning": null, "handicap": null, "total": null, "last_update": { "date": "2018-07-29 08:15:53.000000", "timezone_type": 3, "timezone": "UTC" } } ] }
  </code></pre>
  
  <p>What am I doing wrong?</p>
  
  <p>Note: I am using axios to load the data from an API.</p>