title: bootstrap-vue nested object in array to show in table
body: <p>I'm trying to print out the league table but the <strong>Team</strong> part is in nested object. How do I connect to that object, then make them in to table cells for <strong>team.name, team.crest</strong>?
  I have seen an answer <a href="https://stackoverflow.com/questions/57870766/vuejs-display-nested-object-in-b-table-vue-bootstrap">here</a> but still I can't seem to print out the nested team object inside the array. </p>
  
  <p>I've tried to use the :fields prop, but it's not working. I'm stuck. </p>
  
  <p><a href="https://i.stack.imgur.com/tx01V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tx01V.png" alt="enter image description here"></a></p>
  
  <pre><code>Data from console.log:
  
      [{
      draw: 1
      goalDifference: 23
      goalsAgainst: 14
      goalsFor: 37
      lost: 0
      playedGames: 15
      points: 43
      position: 1
      team: { "id": 64, "name": "Liverpool FC", "crestUrl": "http://upload.wikimedia.org/wikipedia/de/0/0a/FC_Liverpool.svg" }   
    }]
  
  &lt;template&gt;
    &lt;b-container&gt;
      &lt;b-table striped hover :fields="fields" :items="info"&gt;
        &lt;template v-slot:cell(name)="data"&gt;{{ data.value.team.name }}&lt;/template&gt;
      &lt;/b-table&gt;
    &lt;/b-container&gt;
  &lt;/template&gt;
  
  data() {
      return {
      fields: [
        { key: 'info.team.name', label: 'Team Name' },
      ],
        info: [],
  }
  </code></pre>