Currently, my table is failing to display the data retrieved from a rest api (itunes), and it also lacks pagination support. When checking the console, I'm encountering the following error:

<table result="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" id="my-table" aria-busy="false" aria-colcount="2" class="table b-table table-sm"><!----><!----><thead role="rowgroup" class=""><!----><tr role="row"><th role="columnheader" scope="col" aria-colindex="1" class="">Artist</th><th role="columnheader" scope="col" aria-colindex="2" class="">Song title</th></tr></thead><!----><tbody role="rowgroup" class=""><!----><!----><!----></tbody></table>

The code in my component looks like this:

<template>
  <div class="container search">
    <div class="row">
      <div class="col-md-8">

        <div class="jumbotron mt-5" style="clear:both">
            <h1 class="display-4">{{title}}</h1>
            <p class="lead">{{intro}}</p>
            <hr class="my-4">
            <p v-if="validated" :class="errorTextClass">Enter a valid search term</p>

            <button
              type="button"
              class="btn btn-primary btn-lg mb-3"
              v-on:click="refreshPage"
              v-if="result.length > 1"
            >
              <font-awesome-icon icon="redo"/> Start again
            </button>
            (<input
              class="form-control form-control-lg mb-3"
              type="search"
              placeholder="Search"
              aria-label="Search"
              v-model="search"
              required
              autocomplete="off"
              id="search"
            >

            <div class="overflow-auto">

                  <b-pagination
                    v-model="currentPage"
                    :total-rows="rows"
                    :per-page="perPage"
                    aria-controls="my-table"
                  ></b-pagination>

                <p class="mt-3">Current Page: {{ currentPage }}</p>

                <b-table
                  id="my-table"
                  :result="result"
                  :fields="fields"
                  :per-page="perPage"
                  :current-page="currentPage"
                  small

                ></b-table>

              </div>

              <div v-for="(result, index) in result" :key="index"
                >
                  <div class="media mb-4">
                    <img
                      :src="resizeArtworkUrl(result)"
                      alt="Album Cover"
                      class="album-cover align-self-start mr-3"
                    >
                    <div class="media-body">
                      <h4 class="mt-0">

                        <button
                          type="button"
                          class="btn btn-primary btn-lg mb-3 float-right"
                          v-on:click="addItem(result)"
                          :disabled="result.disableButton"
                        >

                            <font-awesome-icon icon="plus"/>
                        </button>

                        <b>{{result.collectionName}}</b>
                      </h4>
                      <h6 class="mt-0">{{result.artistName}}</h6>
                      <p class="mt-0">{{result.primaryGenreName}}</p>
                    </div>
                  </div>
                </div>


              <div :class="loadingClass" v-if="loading"></div>

              <button
                class="btn btn-success btn-lg btn-block mb-3"
                type="submit"
                v-on:click="getData"
                v-if="result.length < 1"
              >
                <font-awesome-icon icon="search"/> Search
              </button>
            </div>



          </div>

          <div class="col-md-4">


            <List :itemList="List"/>


          </div>


        </div>
        <!-- <div class='div' v-bind:class="[isActive ? 'red' : 'blue']" @click="toggleClass()"></div> -->


      </div>
</template>

<script>
import List from "../components/myList.vue";

export default {
  name: "Hero",
  components: {
    List
  },
  data: function() {
    return {
      fields: [{
          key: 'artistName',
          label: 'Artist'
        },
        {
          key: 'collectionName',
          label: 'Song title'
        }
      ],
      title: "Simple Search",
      isActive: true,
      intro: "This is a simple hero unit, a simple jumbotron-style.",
      subintro:
        "It uses utility classes for typography and spacing to space content out.",
      result: [],
      errors: [],
      List: [],
      search: "",
      loading: "",
      message: false,
      isValidationAllowed: false,
      loadingClass: "loading",
      errorTextClass: "error-text",
      disableButton: false,
      perPage: 3,
      currentPage: 1
    };
  },

  watch: {
    search: function(val) {
      if (!val) {
        this.result = [];
      }
    }
  },

  computed: {
    validated() {
      return this.isValidationAllowed && !this.search;
    },
    isDisabled: function() {
      return !this.terms;
    },
    rows() {
        return this.result.length
      }
  },

  methods: {
    getData: function() {
      this.isValidationAllowed = true;
      this.loading = true;
      fetch(`https://itunes.apple.com/search?term=${this.search}&entity=album`)
        .then(response => response.json())
        .then(data => {
          this.result = data.results;
          this.loading = false;
          /* eslint-disable no-console */
          console.log(data);
          /* eslint-disable no-console */
        });
    },

    toggleClass: function() {
      // Check value
      if (this.isActive) {
        this.isActive = false;
      } else {
        this.isActive = true;
      }
    },

    refreshPage: function() {
      this.search = "";
    },
    addItem: function(result) {
      result.disableButton = true; // Or result['disableButton'] = true;
      this.List.push(result);
      /* eslint-disable no-console */
      console.log(result);
      /* eslint-disable no-console */
    },

    resizeArtworkUrl(result) {
      return result.artworkUrl100.replace("100x100", "160x160");
    },

  },
  mounted() {
    if (localStorage.getItem("List")) {
      try {
        this.List = JSON.parse(localStorage.getItem("List"));
      } catch (err) {
        console.err(err);
      }
    }
  },
};


</script>

<style>
.loading {
  background-image: url("../assets/Rolling-1s-42px.gif");
  background-repeat: no-repeat;
  height: 50px;
  width: 50px;
  margin: 15px;
  margin-left: auto;
  margin-right: auto;
}

.error-text {
  color: red;
}

.media {
  text-align: left;
}

.album-cover {
  width: 80px;
  height: auto;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

.div {
  width: 100px;
  height: 100px;
  display: inline-block;
  border: 1px solid black;
}
</style>

If anyone has any insights or guidance on what could be causing this issue, I would greatly appreciate it as I am new to Vue. It seems like there might be an error in how I'm referencing variables within the table or some similar mistake.