State for Rating Menu is not persistent accross page refresh even when using URLs

Open Q&A
, ,
1

I’m working right now on extending filters on our website. We are using Vue Instant Search components. I’ve added the Rating Menu - ais-rating-menu | Vue InstantSearch | Algolia, and it seems to work fine, except the fact that after the refresh the state of the menu before the refresh is not applied.

We are using URLs to remember the applied facets and it is correctly appended to the URL, yet after refresh it is not taken into the account - the previously chosen option is not highlighted and results are not filtered.
At the same time it is working for every other attribute, but for some reason it is broken only for ratings. Any idea why and how to fix it?

I’ve copied the code for this component from the documentation:

<ais-rating-menu attribute="rating">
  <template v-slot="{ items, refine, createURL, sendEvent }">
    <ul>
      <li v-for="item in items" :key="item.value">
        <a
          :href="createURL(item.value)"
          :style="{ color: item.isRefined ? 'gold' : 'black' }"
          @click.prevent="refine(item.value)"
        >
          <span v-for="(full, index) in item.stars" :key="index">
            {{ full ? '★' : '☆' }}
          </span>
          ({{ item.count }})
        </a>
      </li>
    </ul>
  </template>
</ais-rating-menu>

Let me know if you need some other pieces of code to understand the problem.