Clear refinements and query on search-box focus

Working on a simple search & filtering PoC using the InstantSearch widgets – smooth sailing so far!

One request we got was to clear all refinements after a search box focus or click. I have tried extending the widget using the template slot as such, but it seems the ‘refine’ function here only has access to refines set inside the search box, not the overall query.

I have tried creating an method in my Vue script but can’t wrap my head around how to access the active query and clear it from that point just yet.

Anyone who can point me in the right direction for this one?

<ais-search-box>
    <template v-slot="{ currentRefinement, isSearchStalled, refine }">
        <input
        type="search"
        :value="currentRefinement"
        @input="refine($event.currentTarget.value)"
        @focus="refine('')"
        >
        <span :hidden="!isSearchStalled">Loading...</span>
    </template>
</ais-search-box>