How to implement custom No Results

Working on an update to v4 of search lite, and Vue instantsearch v2 and stuck on how to display a custom no-results message, and be able to get the query (providing a link to search on another website). I tried the ais-state-results (below), but when there are results there is a debug message and can’t quite figure out how to shut it off.

           <ais-state-results>
              <div slot-scope="{ query, hits }" v-if="!hits.length">
                  <p>None found for <i>{{ query }}</i>.</p>
                  <p>Items archived here are only for the last 5 years.</p>
                  <p>Maybe try <a :href="alt_url" target="_blank">{{query}}</a></p>              
              </div>
            </ais-state-results>

Fill in the slot, and get access to the following things on the slot-scope…etc

Changing to this fixed it.

<ais-state-results>
  <div slot-scope="{ query, hits }">
    <ais-hits v-if="hits.length < 1" />
      <p>No items found for <i>{{ query }}</i>.</p>
    </ais-hits>
  </div>
</ais-state-results>