title: Vuetify external pagination not displaying page numbers
body: <p>I have a v-data-table and I'm trying to add pagination to it.  I've followed the example docs <a href="https://vuetifyjs.com/en/components/data-tables#example-paginate" rel="noreferrer">here</a> I can't see what I'm doing wrong. When my component is created it makes a call to my backend to populate a list of items. Then this is passed to the data table.</p>
  
  <p>I also have a search bar and if I enter anything in it the page numbers pop up then.</p>
  
  <p><strong>HTML</strong> </p>
  
  <pre><code>&lt;v-data-table
        :headers="headers"
        :items="incidents"
        :search="search"
        :pagination.sync="pagination"
        hide-actions
        class="elevation-1"
        item-key="incident_number"
      &gt;
  
  &lt;/v-data-table&gt;
  
   /* table row html in between */
  
  &lt;div class="text-xs-center pt-2"&gt;
        &lt;v-pagination v-model="pagination.page" :length="pages" &lt;/v-pagination&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <p>I have a computed property that works out the page number just like in the example.</p>
  
  <pre><code>computed: {
        pages ()
        {
          if (this.pagination.rowsPerPage == null || this.pagination.totalItems == null)
          {
            return 0
          }
  
          return Math.ceil(this.pagination.totalItems / this.pagination.rowsPerPage)
  
        },
      }
  </code></pre>