title: Algolia Vue Instant Search – Toggling class is resetting attributes
body: <p>I have an Algolia <a href="https://www.algolia.com/doc/api-reference/widgets/refinement-list/vue/" rel="nofollow noreferrer">refinement list</a> but each time I toggle a class around it, the query disappears. I can't work out what it is that is resetting the values.</p>
  
  <p>Here is my current example:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app" :class="{active}"&gt;
      &lt;ais-instant-search :search-client="searchClient" index-name="products"&gt;
        &lt;button @click="toggleActive"&gt;Toggle&lt;/button&gt;
        &lt;span&gt;&amp;larr; Pressing this is wiping the search.&lt;/span&gt;
        &lt;div class="dietary-requirements-dropdown--checkboxes"&gt;
          &lt;ais-refinement-list attribute="dietary" :sort-by="['name:asc']"&gt;&lt;/ais-refinement-list&gt;
        &lt;/div&gt;
      &lt;/ais-instant-search&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import algoliasearch from "algoliasearch/lite";
  
  export default {
    name: "App",
    data() {
      return {
        active: false,
        searchClient: algoliasearch(
          "ZVIJ67X9P8",
          "df6c2515326327131df74c0a879b8794"
        )
      };
    },
    methods: {
      toggleActive() {
        this.active = !this.active;
      }
    }
  };
  &lt;/script&gt;
  
  &lt;style lang="scss"&gt;
  .dietary-requirements-dropdown--checkboxes {
    opacity: 1;
    .active &amp; {
      opacity: 0.2;
    }
  }
  &lt;/style&gt;
  </code></pre>
  
  <p><strong>Demo here:</strong>
  <a href="https://codesandbox.io/s/vue-template-z5woy" rel="nofollow noreferrer">https://codesandbox.io/s/vue-template-z5woy</a></p>