Vueinstantsearch infinite scroll: how to reset when query changes?

Having trouble with vue-instantsearch, infinitescroll and paging.
The docs have code to increment page number and this works initially, but say the user changes a refinement or types more into the search - then we need to reset the page # to 1. How to do that?
Is there an event we can pick up to see when a query changes? using the simple non-searchstore way hopefully.
Also useful would be an event to let us know when a page of results is added to the stack. Only once that is added should we allow page # to increment.

(sorry if my terminology is off, new to vue)

replicated on the docs demo https://community.algolia.com/vue-instantsearch/examples/infinite-scroll.html which has 12 items per page
Steps:

  1. scroll down a bit, say 10 pages. Note the title top left rises to Page 10, that’s the last page of results requested. 120 results shown now.
  2. go back up to the top and search for product ‘hanger’.
  3. 61 results returned, but you will only see 12 and scrolling to the bottom of the page doesn’t load more.

Reason is, I guess, it’s looking for a non-existant page 11, should be looking for page 2.

Partial answer: add vue events on form elements to track changes to the query, use them to reset page number to 1. Is there a neater way?
working example tracking changes in search box only: https://codepen.io/benskelton/pen/eLLwZv

<div class="search-div" @keydown="queryChanged()">
<ais-search-box :autofocus="true"> ....
with a method
queryChanged() { this.page = 1; }

you will get errors when calling that method from elements inside a scope eg refinement list checkboxes. Instead emit an event from inside scope up to the parent eg:
<ais-refinement-list attribute-name="materials" inline-template @refinement-change="queryChanged()">

<md-checkbox class="md-layout-item md-size-80 margin-none refinement-checkbox" :id="facet.name" v-model="facet.isRefined" @change="toggleRefinement(facet);$emit('refinement-change')">

So just one question remains: what’s the best way know when a page of results is added to the stack? Only once that is added should we allow page # to increment.

There’s actually an event page-change being called in pagination, https://github.com/algolia/vue-instantsearch/blob/b4bb7f79e30313a046c607305f2b778e10fe5f4e/src/components/Pagination.vue#L100

Does that help?

Thanks,
I added the ais-pagination component and think we can solve the problem using the methods from that, yet trying to use the event - I must be missing something because it didn’t call the method in the parent page.
codepen: https://codepen.io/benskelton/pen/eLLwZv?editors=1111

relevant added code:
<ais-pagination @page-change="pageChange()"/>
and method
pageChange(){console.log("Page Change!")}