How to pull data into a table from api-football?

Question

JavaScript

Hello.
Need help with one football api.
Request I am making:

<script>
    var app = new Vue({
      el: '#app',
      data: {
        topscorers: []
      },
      created() {
        fetch("https://sportsop-soccer-sports-open-data-v1.p.rapidapi.com/v1/leagues/%7Bleague_slug%7D/seasons/%7Bseason_slug%7D/topscorers", {
      "method": "GET",
      "headers": {
        "x-rapidapi-host": "sportsop-soccer-sports-open-data-v1.p.rapidapi.com",
        "x-rapidapi-key": "4345984802msh66e6938db04b178p12dea9jsn83a6f1683119"
      }
    })
    .then(response => {
      console.log(response);
    })
    .catch(err => {
      console.log(err);
    });
    }
    })
  </script>

From it it is necessary for me to pull out the data in the table. Here is the actual table

<table class="table table-bordered">
      <thead>
        <tr>
          <th scope="col">Player ID</th>
          <th scope="col">Name</th>         
          <th scope="col">Matches</th>
          <th scope="col">Position</th>
          <th scope="col">Nationality</th>
          <th scope="col">Team Name</th>
          <th scope="col">Goals</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="topscorer in topscorers">
          <td>{{ topscorer.player_id }}</td>
          <td>{{ topscorer.fullname }}</td>
          <td>{{ topscorer.matches }}</td>
          <td>{{ topscorer.position }}</td>
          <td>{{ topscorer.nationality }}</td>
          <td>{{ topscorer.team }}</td>
          <td>{{ topscorer.goals }}</td>
        </tr>
      </tbody>
    </table>

I am a beginner in this business, and I do not fully understand why my data is not displayed in a table. I've been sitting for days, watching different tutorials and nothing happens. So I decided to consult with you.
ps api which i am using

Answer 1

What a great fellow you are, burned the token and even gave a link from what the token is from. This is what I understand respect for hackers)
But seriously, the result that comes as a response from the server is simply displayed on the console.

.then(response => {
      console.log(response);
    })

You need to either get this data before the Vue component is created, or pass data from the created function to data.
If you believe in what is written in the documentation that you have attached, then this is how it should be

var app = new Vue({
  el: '#app',
  data: {
    topscorers: []
  },
  created() {
    fetch("https://sportsop-soccer-sports-open-data-v1.p.rapidapi.com/v1/leagues/%7Bleague_slug%7D/seasons/%7Bseason_slug%7D/topscorers", {
        "method": "GET",
        "headers": {
          "x-rapidapi-host": "sportsop-soccer-sports-open-data-v1.p.rapidapi.com",
          "x-rapidapi-key": "4345984802msh66e6938db04b178p12dea9jsn83a6f1683119"
        }
      })
      .then(responseJSON => {
        return responseJSON.json()
      })
      .then(response => {
      	this.topscorers = response.data.topsorers
      })
      .catch(err => {
        console.log(err);
      });
  }
})