title: How to add API in my v-data-table Vuetify Vuex Axios API
body: <p>I have a problem when trying to search my API data table using v-data-table 
  here's my code, I want to assign my reports state but how to add this array, and how I can fix my search table</p>
  
  <pre><code>  &lt;div class="ReportsTable"&gt;
      &lt;div class="my-3 mx-1"&gt;
        &lt;v-card&gt;
          &lt;v-card flat color="secondary" dark&gt;
            &lt;v-card-title&gt;
              &lt;span&gt;Reports&lt;/span&gt;
              &lt;v-spacer&gt;&lt;/v-spacer&gt;
              &lt;v-text-field
                v-model="search"
                append-icon="search"
                label="Search"
                single-line
                hide-details
              &gt;&lt;/v-text-field&gt;
            &lt;/v-card-title&gt;
          &lt;/v-card&gt;
          &lt;v-data-table
            v-for="report in reportsData.data"
            :key="report.id"
            :headers="headers"
            :items="reports"
            :search="search"
          &gt;
            &lt;template v-slot:items="props"&gt;
              &lt;td&gt;{{ report.user.email }}&lt;/td&gt;
              &lt;td&gt;{{ report.issues }}&lt;/td&gt;
              &lt;td&gt;{{ report.information }}&lt;/td&gt;
              &lt;td&gt;{{ report.created_at }}&lt;/td&gt;
            &lt;/template&gt;
            &lt;template v-slot:no-results&gt;
              &lt;v-alert
                :value="true"
                color="error"
                icon="warning"
              &gt;Your search for "{{ search }}" found no results.&lt;/v-alert&gt;
            &lt;/template&gt;
          &lt;/v-data-table&gt;
        &lt;/v-card&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { mapState } from "vuex";
  export default {
    data() {
      return {
        search: "",
        headers: [
          { text: "Email", value: "email" },
          { text: "Issues", value: "issues" },
          { text: "Information", value: "information" },
          { text: "created_at", value: "created_at" }
        ],
        reports: [
          { email: null, issues: null, information: null, created_at: null }
        ]
      };
    },
    mounted() {
      this.$store.dispatch("loadReportsData");
    },
    computed: mapState(["reportsData"])
  };
  &lt;/script&gt;
  
  &lt;style lang="scss"&gt;
  &lt;/style&gt;
  </code></pre>
  
  <p><a href="https://i.imgur.com/2c5pL8C.png" rel="nofollow noreferrer">https://i.imgur.com/2c5pL8C.png</a> here's my error example and this my unfiltered example <a href="https://i.imgur.com/a8Z6PQh.png" rel="nofollow noreferrer">https://i.imgur.com/a8Z6PQh.png</a>
  my table can grab that API but i can't search specific data on my search method  please help me</p>