Javascript – Algolia autocomplete warning 'The attribute "…" described by the path ["…"] does not exist on the hit. Did you set it in `attributesToHighlight`?'

I have developed a web app with VueJS (Composition API) and use Algolia as my search engine. I followed the guidelines from Algolia to build a component for autocomplete and though it works, I get this strange warning in the console:

The attribute "city" described by the path ["city"] does not exist on the hit. Did you set it in attributesToHighlight?

"City" is defined as a searchable attribute and it is defined in my component as attributeToHighlight. When I use the autocomplete search and search for a city name, it does get highlighted, so I really don’t understand why I get the warning.

This is the autocomplete component:

<template>
  <div id="autocomplete" />
</template>

<script setup>
import { algoliaSearchClient } from 'boot/algolia'
import { autocomplete, getAlgoliaResults } from '@algolia/autocomplete-js'
import { onMounted } from 'vue'

import '@algolia/autocomplete-theme-classic'

const INDEX_NAME = 'companies'

onMounted(async () => {
  autocomplete({
    container: '#autocomplete',
    placeholder: 'Search company',
    getSources ({ query }) {
      return [{
        sourceId: INDEX_NAME,
        getItems () {
          const results = getAlgoliaResults({
            searchClient: algoliaSearchClient,
            queries: [{
              indexName: INDEX_NAME,
              query,
              params: {
                hitsPerPage: 5,
                attributesToSnippet: [],
                attributesToHighlight: ['name', 'city'],
                snippetEllipsisText: '…'
              }
            }]
          })

          // console.log('Algolia results: ', results)

          return results
        },
        templates: {
          item ({ item, components, html }) {
            return html`
              <div class="aa-ItemWrapper">
                <div class="aa-ItemContent">
                  <div class="aa-ItemContentBody">
                    <div class="aa-ItemContentTitle">
                      ${components.Highlight({
                        hit: item,
                        attribute: 'name'
                      })}
                    </div>
                    <div class="aa-ItemContentDescription">
                      ${components.Highlight({
                        hit: item,
                        attribute: 'city'
                      })}
                    </div>
                  </div>
                  <div class="aa-ItemActions">
                    <button
                      class="aa-ItemActionButton aa-DesktopOnly aa-ActiveOnly"
                      type="button"
                      title="Select"
                    >
                      <svg
                        viewBox="0 0 24 24"
                        width="20"
                        height="20"
                        fill="currentColor"
                      >
                        <path
                          d="M18.984 6.984h2.016v6h-15.188l3.609 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.609 3.609h13.172v-4.031z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            `
          }
        }
      }]
    }
  })
})
</script>

In my boot/algolia file, this is the definition of the ‘companies’ index:

companyIndex.setSettings({
  // Select the attributes you want to search in
  searchableAttributes: [
    'city',
    'country.label',
    'companyType.label',
    'companyNo',
    'contacts',
    'customerSince',
    'description',
    'duns',
    'facebook',
    'fullAddress',
    'healthScore',
    'industry.label',
    'instagram',
    'isReference',
    'linkedin',
    'name',
    'notes',
    'numOfContacts',
    'numOfOpportunities',
    'objectType',
    'objectLabel',
    'opportunities',
    'phone',
    'solutions',
    'state',
    'streetLine1',
    'streetLine2',
    'website',
    'zipcode'
  ],
  // Set up some attributes to filter results on
  attributesForFaceting: [
    'searchable(country.label)',
    'searchable(companyType.label)',
    'searchable(industry.label)',
    'healthScore',
    'isReference',
    'objectType'
  ]
})

The search index works without a problem. See these screenshots:

Does anybody have an idea why I get the warning and how to get rid of it?