vuetifyのcheckboxで絞り込みを行う方法

Question

checkboxを利用し、データの絞り込みを行いたい

vue.jsで音楽コードの検索システムを作っています。

checkboxでデータのフィルタリングをしたいのですがうまくいきません。

実現したいことはMajor Key、Minor Key、Harmonic Minor Key、Melodic Minor Keyをチェック時にkeysのデータから該当するデータを表示したいです。
また、searchフィールドも同時に動くようにしたいため、and条件で絞り込みを考えております。

<template>
<v-app class="ma-0">
  <v-card>
    <h2 class="text-sm-left mt-2 pl-4">
			Key
		</h2>
    <v-container fluid>
      <v-row>
        <v-col cols="6" md="2">
        <v-checkbox
                v-model="search"
                label="Major"
                color="primary"
                value="Major"
                hide-details
              ></v-checkbox>
        </v-col>
        <v-col cols="6" md="2">
        <v-checkbox
                v-model="search"
                label="Natural Minor"
                color="primary"
                value="Natural Minor"
                hide-details
              ></v-checkbox>
        </v-col>
        <v-col cols="6" md="2">
        <v-checkbox
                v-model="search"
                label="Harmonic Minor"
                color="primary"
                value="Harmonic Minor"
                hide-details
              ></v-checkbox>
        </v-col>
        <v-col cols="6" md="2">
        <v-checkbox
                v-model="search"
                label="Melodic Minor"
                color="primary"
                value="Melodic Minor"
                hide-details
              ></v-checkbox>
        </v-col>
      </v-row>
      <!-- <v-spacer></v-spacer> -->
      <v-col cols="6" md="8">
      <v-text-field
        v-model="search"
        append-icon="mdi-magnify"
        label="Search"
        single-line
        hide-details
      ></v-text-field>
     
      </v-col>
    <v-data-table
      class="pointer"
      :headers="headers"
      :items="keys"
      :search="search"
      :items-per-page="60"
      @click:row="
      (data) => {
        // 無理くりここで画面遷移させる
        $router.push(`/music-reference/keys_${data.tonic}_${data.key}`)
      }
    "
      >
    </v-data-table>
    
    </v-container>
  </v-card>
  </v-app>
</template>

<script>
  export default {
    data () {
      return {
        ex4: ['red', 'indigo', 'orange', 'primary', 'secondary', 'success', 'info', 'warning', 'error', 'red darken-3', 'indigo darken-3', 'orange darken-3'],
      }
    },
    data () {
      return {
        search: '',
        // selectionType: 'independent',

        headers: [
          { text: 'Tonic', value: 'tonic' },
          { text: 'Key', value: 'key' },
          // { text: 'Key', value: 'key', filterable: false }
        ],
        keys: [
          { tonic: 'C', key: 'Major'},
          { tonic: 'G', key: 'Major'},
          { tonic: 'D', key: 'Major'},
          { tonic: 'A', key: 'Major'},
          { tonic: 'E', key: 'Major'},
          { tonic: 'B', key: 'Major'},
          { tonic: 'F#', key: 'Major'},
          { tonic: 'C#', key: 'Major'},
          { tonic: 'F', key: 'Major'},
          { tonic: 'Bb', key: 'Major'},
          { tonic: 'Eb', key: 'Major'},
          { tonic: 'Ab', key: 'Major'},
          { tonic: 'Db', key: 'Major'},
          { tonic: 'Gb', key: 'Major'},
          { tonic: 'Cb', key: 'Major'},
          { tonic: 'A', key: 'Natural Minor'},
          { tonic: 'E', key: 'Natural Minor'},
          { tonic: 'B', key: 'Natural Minor'},
          { tonic: 'F#', key: 'Natural Minor'},
          { tonic: 'C#', key: 'Natural Minor'},
          { tonic: 'G#', key: 'Natural Minor'},
          { tonic: 'D#', key: 'Natural Minor'},
          { tonic: 'A#', key: 'Natural Minor'},
          { tonic: 'D', key: 'Natural Minor'},
          { tonic: 'G', key: 'Natural Minor'},
          { tonic: 'C', key: 'Natural Minor'},
          { tonic: 'F', key: 'Natural Minor'},
          { tonic: 'Bb', key: 'Natural Minor'},
          { tonic: 'Eb', key: 'Natural Minor'},
          { tonic: 'Ab', key: 'Natural Minor'},
          { tonic: 'A', key: 'Harmonic Minor'},
          { tonic: 'E', key: 'Harmonic Minor'},
          { tonic: 'B', key: 'Harmonic Minor'},
          { tonic: 'F#', key: 'Harmonic Minor'},
          { tonic: 'C#', key: 'Harmonic Minor'},
          { tonic: 'G#', key: 'Harmonic Minor'},
          { tonic: 'D#', key: 'Harmonic Minor'},
          { tonic: 'A#', key: 'Harmonic Minor'},
          { tonic: 'D', key: 'Harmonic Minor'},
          { tonic: 'G', key: 'Harmonic Minor'},
          { tonic: 'C', key: 'Harmonic Minor'},
          { tonic: 'F', key: 'Harmonic Minor'},
          { tonic: 'Bb', key: 'Harmonic Minor'},
          { tonic: 'Eb', key: 'Harmonic Minor'},
          { tonic: 'Ab', key: 'Harmonic Minor'},
          { tonic: 'A', key: 'Melodic Minor'},
          { tonic: 'E', key: 'Melodic Minor'},
          { tonic: 'B', key: 'Melodic Minor'},
          { tonic: 'F#', key: 'Melodic Minor'},
          { tonic: 'C#', key: 'Melodic Minor'},
          { tonic: 'G#', key: 'Melodic Minor'},
          { tonic: 'D#', key: 'Melodic Minor'},
          { tonic: 'A#', key: 'Melodic Minor'},
          { tonic: 'D', key: 'Melodic Minor'},
          { tonic: 'G', key: 'Melodic Minor'},
          { tonic: 'C', key: 'Melodic Minor'},
          { tonic: 'F', key: 'Melodic Minor'},
          { tonic: 'Bb', key: 'Melodic Minor'},
          { tonic: 'Eb', key: 'Melodic Minor'},
          { tonic: 'Ab', key: 'Melodic Minor'}
      ],
      }
      
    },
  }
</script>

<style lang="css">
  .pointer:hover {
    cursor: pointer;
  }
</style>