title: bootstrap-vue table doesn't get populated with my database data
body: <p>I would like to populate my bootstrap-vue table with data from my database.  I am using vuex to attempt to achieve this; however, the bootstrap-vue table isn't getting the data for some reason. I checked Vuex dev tools:
  <a href="https://i.stack.imgur.com/QJlW2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QJlW2.png" alt="enter image description here"></a></p>
  
  <p>I added <code>console.log('Getters: ' + this.$store.getters.allEmployees);</code> to my component to see what that retrieves and it only outputs Getters: to the console.</p>
  
  <p>To further troubleshoot this, I hardcoded: <code>[{"id":1,"name":"Jane Smith","email":"jane@smith.com","job_title":"Lead"},{"id":2,"name":"John Smith","email":"john@smith.com","job_title":"Installer"}]</code> into the <code>employees</code> state and now the data gets loaded into the table.</p>
  
  <p>Vuex module employees.js</p>
  
  <pre><code>const state = {
      employees: [],
      employeesStatus: null,
  };
  
  const getters = {
      allEmployees: state =&gt; {
         return state.employees;
      },
  };
  
  const actions = {
      fetchAllEmployees({commit, state}) {
          commit('SET_EMPLOYEES_STATUS', 'loading');
  
          axios.get('/api/employees')
              .then(res =&gt; {
                  commit('SET_EMPLOYEES', res.data);
                  //console.log(state.employees);
                  commit('SET_EMPLOYEES_STATUS', 'success');
              })
              .catch(error =&gt; {
                  commit('SET_EMPLOYEES_STATUS', 'error');
              });
      },
  };
  
  const mutations = {
      SET_EMPLOYEES(state, employees) {
          state.employees = employees;
      },
      SET_EMPLOYEES_STATUS(state, status) {
          state.employeesStatus = status;
      } 
  };
  
  export default {
      state, getters, actions, mutations,
  };
  </code></pre>
  
  <p>VueJS component EmployeeDataTable.vue:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="overflow-auto pb-3" style="background: white; "&gt;
          &lt;b-card
          header="Employees"
          header-tag="header"
          &gt;
              &lt;b-pagination
              v-model="currentPage"
              :total-rows="rows"
              :per-page="perPage"
              aria-controls="my-table"
              &gt;&lt;/b-pagination&gt;
  
              &lt;p class="mt-3"&gt;Current Page: {{ currentPage }}&lt;/p&gt;
  
              &lt;b-table
              id="employee-table"
              ref="employee-table"
              :items="items"
              :per-page="perPage"
              :current-page="currentPage"
              small
              &gt;&lt;/b-table&gt;
          &lt;/b-card&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { mapGetters } from 'vuex';
  
    export default {
      name: "EmployeeDataTable",
  
      data() {
        return {
          perPage: 3,
          currentPage: 1,
          items: [],
        }
      },
      computed: {
        ...mapGetters(['allEmployees']),
  
        rows() {
          return this.items.length
        }
      },
      methods: {
          getEmployees() {
            this.$store.dispatch('fetchAllEmployees').then(() =&gt; {
              this.items = this.$store.getters.allEmployees;
              console.log('Getters: ' + this.$store.getters.allEmployees); //&lt;-Returns Getters:
            });
            //this.items = this.$store.getters.allEmployees;
          }
      },
      mounted() {
          this.getEmployees();
      }
    }
  &lt;/script&gt;
  </code></pre>