I am new to coding. I'm trying to make a simple website that pulls the data from my google spreadsheet. I am using Vue.js as it seems to be reasonably easy to cycle through my data to create a table. However, now I have a mix of code that honestly... I don't quite understand... created by me going through about 500 youtube and stackoverflow tutorials/responses.

But for some reason I can't get the data to pull from my spreadsheet. If someone can point me in the right direction on what exactly I'm doing wrong... I would be so grateful. =)

<template>
<div class="container">
    <tbody>
        <table style="width:100%">
            <tr>
                <th v-for="header in headers" :key="header">{{ header }}</th>
            </tr>
            <tr v-for="row in s" :key="row.a">
                <td> {{ row.b}}        </td>
                <td> {{ row.c}} </td>
                <td> {{ row.d}}        </td>
<td> {{ row.e}}        </td>
            </tr>
        </table>
                <br>
        <div v-for="item in items" :key="item.value">
            <p>{{ item }}</p>
        </div>
    </tbody>
</div>
</template>


<style>
const { GoogleSpreadsheet } = require('google-spreadsheet');
const creds = require('creds.json');
import { vueGsheets } from 'vue-gsheets'
import axios from 'axios';


export default {
  mixins: [vueGsheets],
  data() {
      return {
          rows:[],
          api: {
            baseUrl: "https://sheets.googleapis.com/v4/spreadsheets/spreadsheetId/values:ranges=A!B1:F1?key=<key-here>",
            "spreadsheetId": '<myid>',
            get return() {
            return this.return;
          },
        },
}
},

methods: {
 getData(apiUrl) {
          axios.get(apiUrl).then((res) => {
            this.rows = res.data.valueRanges;
            console.log(this.rows);
            const { baseUrl } = this.api;
            });
      }
}
};
</script>