Nested attributes not working on autocomplete-js?

Hello,

I’m trying to use the components Highlights or Snippet from autocomplete such as described under: autocomplete | Autocomplete | Algolia

My issue is that the Snippet and Highlight components do NOT work on nested attributes.

Works (without nested attribute):

return components.Snippet({ hit: item, attribute: 'test' });

Does not work (nested attribute):

return components.Snippet({ hit: item, attribute: 'fr.title' });

The last one simply returns nothing.

Full sample code (vuejs3):

import { onMounted } from 'vue';
import algoliasearch from 'algoliasearch';
import { autocomplete, getAlgoliaResults } from '@algolia/autocomplete-js';
import '@algolia/autocomplete-theme-classic';

const searchClient = algoliasearch('id', 'api');


onMounted(() => {
  autocomplete({
    container: '#autocomplete',
    placeholder: 'Search for posts',
    openOnFocus: true,
    getSources({ query }) {
      return [
        {
          sourceId: 'products',
          getItems() {
            return getAlgoliaResults({
              searchClient,
              queries: [
                {
                  indexName: 'myindex',
                  query,
                  params: {
                    hitsPerPage: 5,
                    attributesToSnippet: ['*'],
                    snippetEllipsisText: '…',
                  },
                },
              ],
            });
          },
          templates: {
            item({ item, components }) {
              return components.Snippet({ hit: item, attribute: 'test' });
            },
          },
        },
      ];
    },
  });
});

Data model sample:

{
  "test": "Test not nested",
  "general": {
    "type": "Record",
    "author": "Miaouw"
  },
  "fr": {
    "title": "Nested title",
    "subject": "2013",
    "content": ""
  },
  "objectID": "9999"
}

For other people lost with the right syntax, the Components require the array syntax, which is like that:

                ${components.Snippet({
            hit: item,
            attribute: ['level1', 'level2'],
          })}