title: sortable and filterable not work in dynamic data from api in DataTable vuetify
body: <p>sortable and filterable not work in dynamic data from API in DataTable vuetify</p>
  <p>its works for static data.</p>
  <p>in laravel api :</p>
  <pre><code> $posts = Post::select('id', 'title', 'type', 'active', 'category_id')
                      -&gt;with('category')
                      -&gt;where('author_id', $request['userId'])
                      -&gt;orderBy('created_at', 'desc')
                      -&gt;paginate($size);
  </code></pre>
  <p>in client :</p>
  <pre><code>        &lt;template&gt;
            &lt;main&gt;
              &lt;v-app&gt;
                &lt;!--breadcrumbs--&gt;
                &lt;breadcrumbs :breadcrumbs=&quot;breadcrumbs&quot;&gt;&lt;/breadcrumbs&gt;
                &lt;!----&gt;
                &lt;!--actions--&gt;
                &lt;div class=&quot;actions container&quot;&gt;
                  &lt;v-btn class=&quot;action__button&quot; depressed color=&quot;success&quot; @click=&quot;gotoNewCategory&quot;&gt;
                    &lt;v-icon dark&gt; mdi-plus &lt;/v-icon&gt;
                    insert category
                  &lt;/v-btn&gt;
                &lt;/div&gt;
                &lt;!----&gt;
  &lt;v-card style=&quot;margin: 15px; padding: 10px&quot;&gt;
          &lt;v-text-field
            v-model=&quot;search&quot;
            append-icon=&quot;mdi-magnify&quot;
            label=&quot;search&quot;
            single-line
            hide-details
          &gt;&lt;/v-text-field&gt;
        &lt;/v-card&gt;
  
                &lt;!--datatable--&gt;
                &lt;v-data-table
                  :headers=&quot;headers&quot;
                  :items=&quot;categorys&quot;
                  :page=&quot;page&quot;
                  :pageCount=&quot;numberOfPages&quot;
                  :options.sync=&quot;options&quot;
                  :server-items-length=&quot;totalCategorys&quot;
                  :loading=&quot;loading&quot;
  :search=&quot;search&quot;
                  class=&quot;elevation-1&quot;
                  no-data-text=&quot;no data!&quot;
                  :footer-props=&quot;{
                    showFirstLastPage: true,
                    'items-per-page-text': 'test',
                    'items-per-page-all-text': 'all',
                    'page-text': '',
                  }&quot;
                &gt;
                  &lt;template v-slot:top&gt;
                    &lt;v-dialog v-model=&quot;dialogDelete&quot; max-width=&quot;500px&quot;&gt;
                      &lt;v-card&gt;
                        &lt;v-card-title class=&quot;headline&quot;&gt;
      &lt;/v-card-title
                        &gt;
                        &lt;v-card-actions&gt;
                          &lt;v-spacer&gt;&lt;/v-spacer&gt;
                          &lt;v-btn color=&quot;blue darken-1&quot; text @click=&quot;closeDelete&quot;&gt;no&lt;/v-btn&gt;
                          &lt;v-btn color=&quot;blue darken-1&quot; text @click=&quot;deleteCategoryConfirm&quot;
                            &gt;yes&lt;/v-btn
                          &gt;
                          &lt;v-spacer&gt;&lt;/v-spacer&gt;
                        &lt;/v-card-actions&gt;
                      &lt;/v-card&gt;
                    &lt;/v-dialog&gt;
                  &lt;/template&gt;
                  &lt;template v-slot:[`item.actions`]=&quot;{ item }&quot;&gt;
                    &lt;td&gt;
                      &lt;v-icon small class=&quot;mr-2&quot; @click=&quot;editCategory(item)&quot;&gt; mdi-pencil &lt;/v-icon&gt;
          
                      &lt;v-icon small @click=&quot;deleteCategory(item)&quot;&gt; mdi-delete &lt;/v-icon&gt;
                    &lt;/td&gt;
                  &lt;/template&gt;
                &lt;/v-data-table&gt;
                &lt;!----&gt;
              &lt;/v-app&gt;
            &lt;/main&gt;
          &lt;/template&gt;
          &lt;script&gt;
          import breadcrumbs from &quot;~/components/breadcrumbs&quot;;
          
          export default {
            name: &quot;categorys&quot;,
            layout: &quot;dashboard&quot;,
            components: { breadcrumbs },
          
            data() {
              return {
  search: &quot;&quot;,
                page: 1,
                totalCategorys: 0,
                numberOfPages: 0,
                dialogDelete: false,
                editedIndex: -1,
                categoryIdForDelete: &quot;&quot;,
                loading: true,
                options: {},
                headers: [
                  { text: &quot;ID&quot;, value: &quot;id&quot;, align: &quot;start&quot; },
                  { text: &quot;categoryName&quot;, value: &quot;categoryName&quot;, align: &quot;start&quot; },
                  { text: &quot;actions&quot;, value: &quot;actions&quot;, sortable: false },
                ],
                categorys: [],
                
              };
            },
            //this one will populate new data set when user changes current page.
            watch: {
              options: {
                handler() {
                  this.readDataFromAPI();
                },
              },
              deep: true,
            },
            methods: {
              readDataFromAPI() {
                this.loading = true;
                const { page, itemsPerPage, sortBy, sortDesc } = this.options;
                let pageNumber = page;
          
                this.$axios
                  .get(
                    &quot;/api/category/categories?size=&quot; +
                      itemsPerPage +
                      &quot;&amp;page=&quot; +
                      pageNumber +
                      &quot;&amp;sortby=&quot; +
                      sortBy +
                      &quot;&amp;sortDesc=&quot; +
                      sortDesc,
                    this.fields
                  )
                  .then((response) =&gt; {
                    this.loading = false;
                    this.categorys = response.data.result.data;
                    this.totalCategorys = response.data.result.total;
                    this.numberOfPages = Math.round(response.data.result.total / itemsPerPage);
                  });
              },
              filterOnlyCapsText(value, search, item) {
                return (
                  value != null &amp;&amp;
                  search != null &amp;&amp;
                  typeof value === &quot;string&quot; &amp;&amp;
                  value.toString().toLocaleUpperCase().indexOf(search) !== -1
                );
              },
              gotoNewCategory() {
                this.$router.push(&quot;/dashboard/categorys/new&quot;);
              },
              editCategory(item) {
                this.$router.push({ name: &quot;dashboard-categorys-edit&quot;, params: item });
              },
              deleteCategory(category) {
                this.categoryIdForDelete = category.id;
                this.editedIndex = this.categorys.indexOf(category);
                this.dialogDelete = true;
              },
          
              deleteCategoryConfirm() {
                this.categorys.splice(this.editedIndex, 1);
                this.$axios
                  .delete(&quot;api/category/delete?id=&quot; + this.categoryIdForDelete)
                  .then((response) =&gt; {
                    if (response.data.status === &quot;success&quot;) {
                      this.$toast.show(response.data.message, {
                        theme: &quot;toasted-primary&quot;,
                        position: &quot;bottom-left&quot;,
                        type: &quot;success&quot;,
                        duration: 2000,
                      });
                    } else {
                      let list = [];
                      $.each(response.data.message, function (key, value) {
                        list.push(value);
                      });
                      this.$toast.show(list, {
                        theme: &quot;toasted-primary&quot;,
                        position: &quot;bottom-left&quot;,
                        type: &quot;error&quot;,
                        duration: 4000,
                      });
                    }
                  });
                this.closeDelete();
              },
          
              closeDelete() {
                this.dialogDelete = false;
                this.$nextTick(() =&gt; {
                  this.editedIndex = -1;
                });
              },
            },
            mounted() {
              this.readDataFromAPI();
            },
            filters: {
              striphtmltag: function (value) {
                var div = document.createElement(&quot;div&quot;);
                div.innerHTML = value;
                var text = div.textContent || div.innerText || &quot;&quot;;
                return text;
              },
            },
          };
          &lt;/script&gt;
          &lt;style lang=&quot;scss&quot; scoped&gt;
          * {
            font-family: YekanBakh !important;
            letter-spacing: normal !important;
          }
          
          button {
            &amp;:focus {
              outline: none !important;
            }
          }
          
          .elevation-1 {
            box-shadow: 0 0.46875rem 2.1875rem rgba(4, 9, 20, 0.03),
              0 0.9375rem 1.40625rem rgba(4, 9, 20, 0.03), 0 0.25rem 0.53125rem rgba(4, 9, 20, 0.05),
              0 0.125rem 0.1875rem rgba(4, 9, 20, 0.03) !important;
            margin: 15px;
          }
          &lt;/style&gt;
  </code></pre>
  <p>filterable not pass to API variable.</p>
  <p>but in option for sortable :</p>
  <p>groupBy: Array(0)
  groupDesc: Array(0)
  itemsPerPage: 10
  multiSort: false
  mustSort: false
  page: 1
  sortBy: Array(0)
  sortDesc: Array(0)</p>