AisRangeInput - Set values from get url : mix and max [Vue InstantSearch]

Hello,

I’m implementing AisRangeInput on the search page, when I set the min and max value, the query is done correctly, and prices are filtered, and the query url is set, but when refresh the page, prices in the input are gone (min,max) but still working in the url and reflected in the search results.
I tried to read the query in vue router but unable to select the results :confused:

Objective : set the values in the min and max slot from the query url .

Other fields are set automatically, for example: ais-menu-select and ais-refinement-list , based on the query

Query : http://127.0.0.1:8000/en/search?range[product_price]=10%3A12 → prices between 10 and 12 €

console.log( this.$route.query )
{range[product_price]: “10:12”}

Vue Code ais-range-input
<ais-range-input
    attribute="product_price"
    :min="0"
    :max="1000"
    :precision="2"
>
<span slot="minLabel">Minimum:</span>
<span slot="maxLabel">Max:</span>
<span slot="separator">→</span>
<span slot="submitLabel">Submit</span>
</ais-range-input>