Query routing renders as individual keys in an array

Hi there, I’m trying to use routing in my Vue InstantSearch app to create linkable search results. However, my search query is getting split into sliced array that looks like this: /search?query%5B0%5D=h&query%5B1%5D=o&query%5B2%5D=f&query%5B3%5D=m when it should really be /search?query=hofm

I’ve pretty much lifted most of the elements in the Vue InstantSearch widgets like below:

  <ais-instant-search index-name="publicNotices" v-bind:search-client="searchClient" :routing="routing">
    <label class="block font-bold my-2 w-full" for="q">Search Term</label>
    <ais-search-box>
      <div class="flex flex-wrap" slot-scope="{ currentRefinement, isSearchStalled, refine }">
        <input
          type="search"
          class="flex-1 appearance-none border-grey rounded border mb-4 p-2"
          id="q"
          :routing="routing"
          v-model="currentRefinement"
          @input="refine($event.currentTarget.value)"
        >
        <span :hidden="!isSearchStalled">Loading...</span>
      </div>
    </ais-search-box>
    <div class="flex flex-row">
      <ais-menu-select attribute="publication"
        :class-names="{
          'ais-MenuSelect': 'min-w-1/4 max-w-1/2 mr-2'
        }"
      >
        <select
          class="p-1 border-grey rounded border my-2 appearance-none down-arrow w-full"
          slot-scope="{ items, canRefine, refine }"
          :disabled="!canRefine"
          @change="refine($event.currentTarget.value)"          
        >
          <option value="">All</option>
          <option
            v-for="item in items"
            :key="item.value"
            :value="item.value"
            :selected="item.isRefined"
          >
            {{ item.label }}
          </option>
        </select>
      </ais-menu-select>
      <ais-menu-select attribute="location"
        :class-names="{
          'ais-MenuSelect': 'min-w-1/4 max-w-1/2 ml-2'
        }"
      >
        <select
          class="p-1 border-grey rounded border my-2 appearance-none down-arrow w-full"
          slot-scope="{ items, canRefine, refine }"
          @change="refine($event.currentTarget.value)"          
        >
          <option value="">All</option>
          <option
            v-for="item in items"
            :key="item.value"
            :value="item.value"
            :selected="item.isRefined"
          >
            {{ item.label }}
          </option>
        </select>
      </ais-menu-select>
    </div>
    <ais-hits>
      <div slot-scope="{ items }">
        <article class="mb-8" v-for="item in items" :key="item.objectID">
          <h2 class="mb-2 font-bold uppercase">
            <a class="no-underline text-red hover:text-red-dark" href="#">
              <ais-highlight 
                attribute="title" 
                :hit="item" 
                :class-names="{
                  'ais-Highlight': 'test-class another-class',
                  'ais-Highlight-highlighted': 'marked-class',
                }"
              />
            </a>
          </h2>
          <p>{{ item.publication }}, {{ item.prettyDate }}</p>
          <ais-snippet attribute="description" :hit="item" />
        </article>
      </div>
    </ais-hits>
    <ais-pagination />
  </ais-instant-search>
</template>

<script>
import algoliasearch from 'algoliasearch/lite';
import { history as historyRouter } from 'instantsearch.js/es/lib/routers';
import { simple as simpleStateMapping } from 'instantsearch.js/es/lib/stateMappings';
import 'instantsearch.css/themes/algolia-min.css';

export default {
  data() {
    return {
      searchClient: algoliasearch(
        '…',
        '…',
      ),
      routing: {
        router: historyRouter(),
        stateMapping: simpleStateMapping(),
      },
    };
  },
};

</script>```

Is there anything out of the ordinary I'm doing here that would cause this to occur?

Hi there,
Thanks for reaching out to us.
I don’t see anything particularly strange there.

I’ve prepared a codesandbox for you.

This is basically a simple example with the url routing just like you did.
One difference is I changed

v-model="currentRefinement"

to

:value="currentRefinement"

(which doesn’t affect the result, anyway).

Can you add changes there to reproduce your issue?
Looking forward to helping your issue!