Visibility of facet filters between Vue InstaSearch and InstaSearch.js 2.10.4

I’m reworking a website that uses the old InstaSearch.js Algolia client to the new Vue InstaSearch using the Vue widgets. I have facet filters on the left (eg. hierarchicalMenu widgets) and the results on the right. Suppose I have two facets to filter by: brands and categories.

When clicking the filters, they adapt accordingly to which results are loaded. Eg. when clicking a particular brand, the categories facet items are limited to only those that apply to the shown results. If I click on a category, same happens to the brands. The facet that I clicked on however, doesn’t get filtered, so I keep seeing all brands after choosing a particular brand. The clicked one just gets highlighted. So far so great, that is what I expect.

But things change when I want to have some more control. Every result/hit shows a little logo of their brand. If the user clicks on it, I want Algolia to only show me the results for that brand, as if I would have clicked the brand facet item on the left.

In the old InstaSearch.js client I believe this code makes it work:

searchParameters.hierarchicalFacetsRefinements = {};
searchParameters.hierarchicalFacetsRefinements['brandCategory.lvl0'] = [brand.substr(0, 1) + " > " + brand];
search.helper.setQueryParameter('hierarchicalFacetsRefinements', searchParameters.hierarchicalFacetsRefinements).search();

Instead, now I use the ais-configure widget which I pass a filters attribute with this string as part of it:

`brand.category.lvl1:'${this.brandFilter.substr(0, 1).toUpperCase()} > ${this.brandFilter}'`

I would think it would react the same and it kind of does, it filters the correct products BUT, and this is problem number 1: it adapts all facets according to what is matched with the results. So I only get to see the categories that are linked to the products and only the specific brand. The other facet options are gone.

On top of that, problem number 2: it seems like there’s no refinement triggered as my ais-clear-refinements widget is not shown, nor is my current-refinements-widget updated.

And problem number 3: the selected brand isn’t highlighted nor is the hirerarchicalMenu opened to the level of the brand as it would be when clicked.

I also tried doing the same with initialUiState and facet-filters attributes but I’m getting the same results.