Vues js: почему флажки не фильтруют значения для отображения?

Я печатаю все массивы для каждого типа ввода = "флажок", но когда я устанавливаю флажок, ничего не происходит. Я просто хочу, чтобы при проверке флажка печатался только массив в значении флажка.

Вот мой код:

<template>
  <main>
    <section>
      <div>
        <input id = "boundingBox" type = "checkbox" value = "boundingBoxes" v-model = "checkboxes">
        <label for = "boundingBox"> i1 </label>

        <input id = "tree" type = "checkbox" value = "trees" v-model = "checkboxes">
        <label for = "tree"> i2 </label>

        <input id = "last" type = "checkbox" value = "cars" v-model = "checkboxes">
        <label for = "last"> i3 </label>
      </div>
      
      <div>
        <h2> list: </h2>
        <div v-for = "(item, index) in checkboxes" :key = "index">
          <p>{{ item[index].name }}</p>
        </div>
      </div>
    </section>
  </main>
</template>

<script>
  const boundingBoxes = [
    {
      name: "bounding box",
      color: "red"
    },
    {
      name: "bounding box",
      color: "orange"
    }
  ];

  const trees = [
    {
      name: "tree",
      color: "green"
    },
    {
      name: "tree",
      color: "red"
    },
    {
      name: "tree",
      color: "yellow"
    }
  ];

  const cars = [
    {
      name: "car",
      color: "black"
    },
    {
      name: "car",
      color: "blue"
    },
    {
      name: "car",
      color: "brown"
    }
  ]

  export default {
    data() {
      return {
        checkboxes:[
          boundingBoxes,
          trees,
          cars
        ],
      }
    },
  }
</script>

Если есть что улучшить или исправить, скажите мне.
На данный момент весь код работает хорошо, не работает только фильтрация с флажками.

Спасибо.