Vue.js - How to access computed property of Child Component (Vuetify Data Tables)

I am new to vue.js and vuetify. I have created a table with Vuetify Data Tables component. The table has checkboxes in first column and a "select all" checkbox in the first column in header. The table is searchable with the build-in search function of the Data Tables component. Here is the problem:

When the table is filtered after searching and the "check all" checkbox is clicked, all rows are checked, even the currently not displayed ones. Currently not displayed rows shouldn't be checked. To fix this behaviour I want to use the built-in computed property "filteredItems" of the Data Tables component. But after searching a few hours in the internet I couldn't find a solution. Can I do this without modifying the Data Table Component itself (maybe emitting an event)?

In Vue.js Chrome Dev Tools I can see the values I need:

Computed property in Vue DEV Tools

Here's my code:

Data Table:

<v-data-table           
        v-model="selected"
        :headers="headers"
        :items="items"
        :search="search"
        :loading="true"
        :pagination.sync="pagination"            
        :rows-per-page-items="[50,100,200]"
        select-all
        item-key="Hostname"            
        class="elevation-1"           
      >
        <template slot="headers" slot-scope="props">
          <tr>
            <th>
              <v-checkbox
                :input-value="props.all"
                :indeterminate="props.indeterminate"
                primary
                hide-details
                @click.native="toggleAll"
              ></v-checkbox>
            </th>
            <th
              v-for="header in props.headers"
              :key="header.text"
              :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
              @click="changeSort(header.value)"
            >
              {{ header.text }}
              <v-icon small>arrow_upward</v-icon>                  
            </th>
          </tr>
        </template>
        <v-progress-linear slot="progress" color="blue" height="2" v-show="progress_visibility" v-model="downloadPercentage"></v-progress-linear>
        <template slot="items" slot-scope="props">
          <tr :active="props.selected" @click="props.selected = !props.selected">
            <td>
              <v-checkbox
                :input-value="props.selected"
                primary
                hide-details
              ></v-checkbox>
            </td>
            <td class="text-xs-left">{{ props.item.Hostname }}</td>
            <td class="text-xs-left">{{ props.item.FQDN }}</td>
            <td class="text-xs-left">{{ props.item.Subnet }}</td>
            <td class="text-xs-left">{{ props.item.MacAdress }}</td>
            <td class="text-xs-left">{{ props.item.SWProfile }}</td>
          </tr>
        </template>            
      </v-data-table>

The "Check All" function:

methods: {
  toggleAll () {
    if (this.selected.length)
      this.selected = []
    else
      // Here I want to access the computed property "filteredItems" of the data table
      this.selected =  this.items.slice()
  }

Thanks in advance!