Nuxt.js内のCheckboxで絞り込み機能を作りたい

Question

Nuxt.jsにてちCheckboxで絞り込み機能を作っております。
カテゴリーごとにコンテンツが表示されれAllを押すと全部表示になるようにしています。

<template>
  <div id="app">
    <v-main class="main">
      <div v-for="(item, index) in items" :key="item.id">
        <input v-model="checked_items" type="checkbox" :value="item">{{ labels[index] }}
      </div>
      {{ checked_items }}

      <input v-model="checked_all" type="checkbox">check_all<br>
      <div>{{ checked_all }}</div>
    </v-main>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items: ['value1', 'value2', 'value3'],
      labels: ['label1', 'label2', 'label3'],
      checked_items: ['value2']
    }
  },
  computed: {
    checked_all: {
      get () {
        return this.checked_items.length === this.items.length
      },
      set (checked) {
        this.checked_items = checked ? this.items : []
      }
    }
  }

}
</script>

ただこれだけですと{{ checked_items }}の部分だけにテキストが表示されるのでHTML(component)も一緒に表示されるようにしたいです。

<template>
  <div id="app">
    <v-main class="main">
      <div v-for="(item, index) in items" :key="item.id">
        <input v-model="checked_items" type="checkbox" :value="item">{{ labels[index] }}
      </div>
      <div class="item.class">
        <h2>{{ item.title }}</h2>
        <img :src="item.image">
        <div class="item.checked_items"> {{ checked_items }} </div>
      </div>
      <input v-model="checked_all" type="checkbox">check_all<br>
      <div>{{ checked_all }}</div>
    </v-main>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items: ['value1', 'value2', 'value3'],
      labels: ['label1', 'label2', 'label3'],
      checked_items: ['value2']
    }
  },
  computed: {
    checked_all: {
      get () {
        return this.checked_items.length === this.items.length
      },
      set (checked) {
        this.checked_items = checked ? this.items : []
      }
    }
  }

}
</script>

理想はこのような形でcheckboxを押すと下記のコードが出るようにしたいです。

      <div class="item.class">
        <h2>{{ item.title }}</h2>
        <img :src="item.image">
        <div class="item.checked_items"> {{ checked_items }} </div>
      </div>

もしなにか良い実装方法があればご教授ください。