Vue: 絞り込み機能の実装に関しての質問です。

Question

前提

Vue、Vuetifyを使用しての「絞り込み機能」の実装をしています。
その最中で、配列要素内の描画と格納及び削除でつまづきましたので
ご質問させてください。

実現したいこと

1-- まず最初に開いた際に、dataの初期値であるchecks: [ ]が空であるのに対し
v-for="(item, i) in searchLineUp"
が、なぜ描画（※）されてしまっているのか（※products内の要素が）

2-- 各「v-checkbox」にチェックを入れるとチェックした商品が下に並びますが
チェックが二つ、三つになると描画され無くなってしまいます。

発生している問題・エラーメッセージ

エラーメッセージは現在特に発生していません。

該当のソースコード

<template>
  <div class="kensaku main">
    <h1>絞り込み検索 モジュール</h1>
    <div>
      <div class="checkbox">
        <v-checkbox
          v-for="categoly in categories" :key="categoly.type"
          v-model="categoly.checkbox"
          :label="categoly.type"
          @click="checkClick(categoly.type)"
        ></v-checkbox>
      </div>
      <ul>
        <li v-for="(item, i) in searchLineUp" :key="i">
          <v-card
            class="mx-auto my-12"
            max-width="374"
          >
            <v-img
              height="250"
              v-bind:src="item.img"
            ></v-img>

            <v-card-text>
              <div>{{ item.categoly }}</div>
              <p class="card-title text--primary">
                {{ item.title }}
              </p>
              <div class="my-4 text-subtitle-1">
                ¥ {{ item.price }}
              </div>
            </v-card-text>
          </v-card>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data: () => ({
      checks: [],
      categories: [
        {type: '靴', checkbox: false,},
        {type: 'シャツ', checkbox: false,},
        {type: '帽子', checkbox: false,},
      ],
      products: [
        // 靴
        {title: '靴01', categoly: '靴', price: '1,000', img: require('@/assets/img/shose/01.png')},
        {title: '靴02', categoly: '靴', price: '2,000', img: require('@/assets/img/shose/02.png')},
        {title: '靴03', categoly: '靴', price: '3,000', img: require('@/assets/img/shose/03.png')},
        // シャツ
        {title: 'シャツ01', categoly: 'シャツ', price: '1,000', img: require('@/assets/img/shirt/01.png')},
        {title: 'シャツ02', categoly: 'シャツ', price: '2,000', img: require('@/assets/img/shirt/02.png')},
        {title: 'シャツ03', categoly: 'シャツ', price: '3,000', img: require('@/assets/img/shirt/03.png')},
        // 帽子
        {title: '帽子01', categoly: '帽子', price: '1,000', img: require('@/assets/img/hat/01.png')},
        {title: '帽子02', categoly: '帽子', price: '2,000', img: require('@/assets/img/hat/02.png')},
        {title: '帽子03', categoly: '帽子', price: '3,000', img: require('@/assets/img/hat/03.png')},
      ],
    }),
    computed: {
      searchLineUp() {
        return this.products.filter(item => {
          return item.categoly.includes(this.checks)
        })
      }
    },
    methods: {
      checkClick(type) {
        const index = this.checks.indexOf(type);
        const match = this.checks[index];
        if(type === match){
          console.log('sucess');
          let remove = [type]
          this.checks = this.checks.filter(list => {
            return ! remove.includes(list)
          })
          console.log(this.checks);
          console.log(this.searchLineUp);
        } else if(index == -1) {
          console.log('error');
          this.checks.push(type)
          console.log(this.checks);
          console.log(this.searchLineUp);
        }
      },
    },
  }
</script>

恐らく、computed内が怪しいのはなんとなく感じますが、
Vueに関しては、本当に初学者のため完全に煮詰まってしまいここに辿り着きました…
大変恐れ入りますが、どなたかご教授お願いいたします。

補足情報（FW/ツールのバージョンなど）

"vue": "^2.6.14",
"vuetify": "^2.6.0"

Answer 1

includes のところが逆になっているのではないでしょうか。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

    computed: {
      searchLineUp() {
        return this.products.filter(item => {
         return this.checks.includes(item.categoly)  // 修正
        })
      }
    },

Comments

[ShojiroAbe]

返信が遅れてしまいすみません！
おかげさまで解決いたしました！
添付していただきましたドキュメントも読みましたが、引数に受け取る対象が間違っていました。
ありがとうございました。