Problem toggling a dropdown of facets, resulting in unchecking of attributes

I have an issue where I’m putting some facet filtering:

<ais-refinement-list attribute="dietary" :sort-by="['name:asc']"></ais-refinement-list>

In a div, which I toggle. But it seems like every time I toggle it, all the facets are unchecked. What am I doing wrong? I have created a stripped back example. To replicate, please:

  1. Click the toggle button
  2. Select a couple of items
  3. Click the toggle button
  4. Watch all the selected facets disappear : (

This issue is the reactive class property re-renders the DOM.

This is a fixed version:

And this is a stackoverflow answer to explain it a bit more thoroughly:

Thanks for posting your findings here @eightarms!