title: I can't display properly v-data-table data: ''Invalid prop: type check failed for prop "items". Expected Array, got Object''
body: <p>I'm starting a project in which I had to use Vue. I'm actually really new to this, so I'm learning on the go. I do apologize in advance since this question have answered before, however, I didn't really understand the solutions provided, which is why I'm here asking myself.</p>
  
  <p>Well, I was trying to display some data on my Data Table (more specifically, v-data-table from Vuetify). I was able to get the data from the API, but, for some reason it doesn't show me anything. Thanks to Vuex I can see that the mutation worked because on the console on Google Chrome I can see the Array of objects. But as I said, it still does't show me a single thing on the table, it even says 'no data available'. Some errors that I get are things like '[Vue warn]: Invalid prop: type check failed for prop "items". Expected Array, got Object' and 'TypeError: this.items.slice is not a function'.</p>
  
  <p>Here is the code from List.vue</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-container id="data-tables" tag="section"&gt;
      &lt;div class="text-right"&gt;
        &lt;v-btn class="mx-2" fab dark color="primary" :to="{ name: 'UserCreate' }"&gt;
          &lt;v-icon dark&gt;mdi-plus&lt;/v-icon&gt;
        &lt;/v-btn&gt;
      &lt;/div&gt;
      &lt;base-material-card
        color="indigo"
        icon="mdi-vuetify"
        inline
        class="px-5 py-3"
      &gt;
        &lt;template v-slot:after-heading&gt;
          &lt;div class="display-2 font-weight-light"&gt;
            Lista de Empleados
          &lt;/div&gt;
        &lt;/template&gt;
  
        &lt;v-text-field
          v-model="search"
          append-icon="mdi-magnify"
          class="ml-auto"
          label="Search"
          hide-details
          single-line
          style="max-width: 250px;"
        /&gt;
  
        &lt;v-divider class="mt-3" /&gt;
  
        &lt;v-data-table
          :headers="headers"
          :items="users"
          :search.sync="search"
          :sort-by="['name', 'office']"
          :sort-desc="[false, true]"
          multi-sort
        &gt;
          &lt;template v-slot:item.actions="{ item }"&gt;
            &lt;v-icon small class="mr-2" @click="editItem(item)"&gt;
              mdi-eye
            &lt;/v-icon&gt;
            &lt;v-icon
              small
              class="mr-2"
              @click="editItem(item)"
              :to="{ name: 'UserUpdate' }"
            &gt;
              mdi-pencil
            &lt;/v-icon&gt;
            &lt;v-icon small @click="deleteItem(item)"&gt;
              mdi-delete
            &lt;/v-icon&gt;
          &lt;/template&gt;
        &lt;/v-data-table&gt;
      &lt;/base-material-card&gt;
    &lt;/v-container&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { mapState } from 'vuex'
  
  export default {
    name: 'UsersTable',
    data() {
      return {
        headers: [
          {
            text: 'Nombre',
            value: 'empleado.nombre',
          },
          {
            text: 'Apellido',
            value: 'empleado.apellido',
          },
          {
            text: 'Dirección',
            value: 'empleado.direccion',
          },
          {
            text: 'Correo Electrónico',
            value: 'email',
          },
          {
            text: 'Teléfono',
            value: 'empleado.telefono',
          },
          {
            sortable: false,
            text: 'Actions',
            value: 'actions',
          },
        ],
        loader: true,
  
        search: undefined,
      }
    },
  
    created() {
      this.$store.dispatch('users/fetchUsers')
    },
    computed: {
      ...mapState(['users']),
    },
    methods: {},
    mounted() {},
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>And the code from user.js, where the fetchUsers it's coming from.</p>
  
  <pre><code>import auth from '@/api/auth'
  
  export const namespaced = true
  
  export const state = {
    users: [],
  }
  
  export const mutations = {
    SET_USERS(state, users) {
      state.users = users
    },
  }
  
  export const actions = {
    fetchUsers({ commit, dispatch }) {
      auth
        .getAllAccounts()
        .then((response) =&gt; {
          commit('SET_USERS', response.data)
        })
        .catch((error) =&gt; {
          const notification = {
            type: 'error',
            message: 'There was a problem fetching users: ' + error.message,
          }
          dispatch('notification/add', notification, { root: true })
        })
    },
  }
  </code></pre>
  
  <p>Thanks in advance.</p>