Vue forEach in computed

Question

I am building a checkbox filter, which stores the clicked checkbox value in an array. After that, the computed data should update but I am always getting undefined.

The Data Structure: Casino { brand_tags { Brand_Tag_Name } }

Computed:

computed: {
    filteredCasinos: function() {
      return this.casinos.forEach(casino => {
        return casino.brand_tags.filter(brandTag => {
          return this.filteredCategories.includes(brandTag.Brand_Tag_Name)
        })
      })
    }
},

HTML (But that is working fine, I guess)

        <label for="Featured">Featured Casinos
          <input type="checkbox" v-model="filteredCategories" value="Featured">
        </label>
        <label for="Featured">Big Brands
          <input type="checkbox" v-model="filteredCategories" value="Big Brand">
        </label>
        <label for="Featured">New Casinos
          <input type="checkbox" v-model="filteredCategories" value="New Casino">
        </label>
        <label for="Featured">Pay n Play
          <input type="checkbox" v-model="filteredCategories" value="Pay N Play">
        </label>
        <label for="Featured">Trusted Casinos
          <input type="checkbox" v-model="filteredCategories" value="Trusted Casino">
        </label>

Answer 1

It happens because return this.casinos.forEach returns undefined.

{ filteredCasinos: function() {
return this.casinos.filter(casino => {
 return !!casino.brand_tags.find(brandTag => {
    return this.filteredCategories.includes(brandTag.Brand_Tag_Name)
    })
  })
}