How to filter v-for results by select options value in VueJS?

Question

Vue.js

I am writing something like filtering products by values, similar to how products are filtered in online stores.
There is such a Select:

<select @click="handleBrand" class="custom-select">
      <option v-for="brand in brands.sort()" :data-foo="brand">{{ brand }}</option>
    </select>

I display only unique values ​​in the filter, without repetitions:

computed:   {
      brands() {
        return [...new Set(this.profiles.map(n => n.brand.name))];
      }, }

I get the value selected by the user with:

methods: {

      handleBrand(e) {
        if(e.target.options.selectedIndex > -1) {
          console.log(e.target.options[e.target.options.selectedIndex].dataset.foo)
        }
      }, 
}

I checked through console.log, then I don’t know which way to move simply.
Through handleBrand I get the selected value, for example: Brand1.
Below are all the results obtained through v-for:

<div v-for="profile in profiles" class="row feed">
---SOME CODE---
        <span>Бренды: {{profile.brand.name}}</span>      
---SOME CODE---
    </div>

The result is something like this:
Brand1
Brand1
Brand2
Brand3
handleBrand conditionally got the value Brand1, how can I make the v-for="profile in profiles" loop below show only brands with the Brand1 value?
The profiles array itself comes via axios from Laravel.

Answer 1

Add the brand property to the component. And use it as a value for your select, and cut out the handleBrand method: Make one more computed property - filtered elements from profiles, whose brand.name is brand:

filteredProfiles() {
  return this.profiles.filter(n => n.brand.name === this.brand);
},

Well, output these filtered elements:

<div v-for="profile in filteredProfiles" class="row feed">