How to pre-apply a hierarchical facet refinement

“algoliasearch”: “^4.8.5”,
“vue-instantsearch”: “^3.4.3”,

I’m trying to get a hierarchical facet refinement to be pre-applied to my component when my page loads.

In my template:

<ais-configure :hitsPerPage="16" :clickAnalytics="true" v-bind="initial" />
<ais-hierarchical-menu :attributes="attributes" :limit="50" />

In my script:

data() {
    return {
      initial: {
        hierarchicalFacetsRefinements: {
          "nestedCategories.L2": ["Concepts > Ecommerce > Platforms"]

I’ve enabled nestedCategories.L0, nestedCategories.L1, and nestedCategories.L2 as a attibute for faceting in my index dashboard.

When my component mounts, I’m getting the following error:

TypeError: Cannot read properties of undefined (reading 'separator')

 at eval (getRefinements.js?5249:19:1)
    at getRefinement (getRefinements.js?5249:38:1)
    at eval (getRefinements.js?5249:99:1)
    at Array.forEach (<anonymous>)
    at eval (getRefinements.js?5249:98:1)
    at Array.forEach (<anonymous>)
    at getRefinements (getRefinements.js?5249:96:1)
    at getRefinementsItems (connectCurrentRefinements.js?a97d:116:1)
    at getItems (connectCurrentRefinements.js?a97d:72:1)
    at Object.getWidgetRenderState (connectCurrentRefinements.js?a97d:91:1)

Here is a sample record from my index:

  "id": "f5e6995a-30c3-4ff0-9cc6-186e84db8a1a",
  "nestedCategories": {
    "L0": [
    "L1": [
      "Concepts > Ecommerce"
    "L2": [
      "Concepts > Ecommerce > Platforms"
  "foo": "lorem ipsum",
  "objectID": "54282282000"

What is the proper way to pre-apply a hierarchical facet refinement?