How to filter multidimensional array in vue js?

Question

Arrays

How to properly filter a multidimensional array of this type:

array[group][brand][position]

[ { "title": "Запрашиваемый код детали",
    "brands": [ {
        "code": "123456",
        "name": "FILTR",
        "description": "Фильтр масляный",
        "positions": [ {
            "price": "221 ₽",
            "availability": "8 шт."
            },{
            "price": "236 ₽",
            "availability": "2 шт."
        } ],
    } ],
} ],

I tried to do it this way:

vue

props:{
        groups: Array,
    },
    computed: {
        filtered() {
            let filters = this.filters;
            return this.groups.filter((group) => {
                            let brands = group.brands.filter((brand) => {
                    if (!filters['brands'].value.includes(brand.name) && filters['brands'].value !== [] && !brand.positions) return false;
                    let positions = brand.positions.filter(function (position) {
                        Object.keys(filters).forEach((index) => {
                            if (index !== 'brands'){
                                if (!filters[index].value[0] <= parseInt(position[index]) || !filters[index].value[1] >= parseInt(position[index])) {
                                     return false;
                                }
                            }
                        });
                        return true;
                    });
                    return positions !== [];
                });
                return brands !== [];
            });
        },
        filters() { return this.$store.state.search.filters },
    }

But this is how filtering occurs at each nesting level and reactivity does not work when changing filters, the values ​​of which are exactly reactive and change in the corresponding inputs, sliders and checkbox list

Answer 1

Somewhere it's easier to check the length of the nested filtered array and use map, iterate as a last resort