How to correctly distribute attributes?

Question

Vue.js

Guys need your help.
I'm trying to make something like a gallery with sorting (result below), but using vue. While I was picking, I finally got confused about attributes v-for="{ ... }"with inheritance and broke all my code. Help me set it up please...

(below - to give you an idea)
It basically works, for one label:

But in order to work correctly, if I understand correctly, I need to wrap the labels and shapes in separate objects. Made. Actually, the problems started here ...
Result: In the end, it should turn out like this (implementation in css + html):

Answer 1

Let's add two properties to the component. Computed is an array of unique values ​​of element types, and normal is an array of user-selected types:

data: () => ({
  selectedTypes: [],
  ...
}),
computed: {
  types() {
    return [...new Set(this.items.map(n => n.type))];
  },
  ...
},

Based on the first array, we will create checkboxes and associate the second array with them:

<template v-for="n in types">
  <input type="checkbox" :value="n" v-model="selectedTypes" :id="n">
  <label :for="n">{{ n }}</label>
</template>

Let's also add one more calculated property - an array of elements to be shown (the type of which is contained in the array of selected types):

computed: {
  filteredItems() {
    const types = this.selectedTypes;
    return this.items.filter(n => types.includes(n.type));
  },
  ...
},

Well, let's show them:

<figure v-for="n in filteredItems">
  <img :src="n.src" alt="">
</figure>

https://jsfiddle.net/dzkscv83/UPD
. Taken from the comments:

I did it a little differently, it works, but I used two templates instead of one
https://jsfiddle.net/madeas/s47gqbaz/5/

I cannot agree with this option.
Two root vue instances nested inside one another - never do that, that's what components are for.
Again, css is repeated three times for hidden items - bad. Hiding items based on the state of the checkboxes instead of looking at the data is bad. It is better to make a class that will be assigned to whoever needs it. And who will need to be determined using a computed property - an array of type names that have checked === false.
If all the elements you use to control the visibility of items are checkboxes, there is no need to dynamically assign the input's type and store it accordingly.
https://jsfiddle.net/rkh3wpyc/