title: Uncaught (in promise) Error: product_categories.name is not a retrieved facet
body: <p>I am using <code>&lt;ais-menu-select</code> to display all my product categories and filter products based on that.</p>
  
  <p>But I got this error: <code>Uncaught (in promise) Error: product_categories.name is not a retrieved facet.</code></p>
  
  <p>I already added <code>product_categories.name</code> field into facets section in my dashboard.</p>
  
  <p><a href="https://i.stack.imgur.com/DgTSo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DgTSo.png" alt="enter image description here"></a> </p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;template&gt;
      &lt;ais-instant-search
              :search-client="searchClient"
              index-name="products"
              class="relative"&gt;
          &lt;ais-search-box&gt;
              &lt;div slot-scope="{ currentRefinement, isSearchStalled, refine }" class="m-0 flex"&gt;
                  &lt;!--                &lt;span :hidden="!isSearchStalled"&gt;Loading...&lt;/span&gt;--&gt;
                  &lt;div class="relative w-full"&gt;
                      &lt;input type="search"
                             class="w-full text-black p-2 border-l border-t border-b border-gray-300 text-base rounded-l"
                             placeholder="Enter a product name..."
                             v-model="currentRefinement"
                             @input="refine($event.currentTarget.value)"&gt;
                          &lt;ais-state-results&gt;
                              &lt;p slot-scope="{ query, hits }" v-if="!hits.length" class="absolute top-100 z-50 bg-white text-black w-full p-2 border-4 border-blue border-t-0 max-h-450px overflow-y-auto"&gt;
  Not found: &lt;q&gt;{{ query }}&lt;/q&gt;
                              &lt;/p&gt;
                              &lt;template v-else slot-scope="{ query }"&gt;
                                  &lt;ais-hits v-if="query.length &gt; 0" class="absolute top-100 z-50 bg-white text-black w-full p-2 border-4 border-blue border-t-0 max-h-450px overflow-y-auto"&gt;
                                      &lt;template slot="item"
                                                slot-scope="{ item }"
                                      &gt;
                                          &lt;div class="w-full"&gt;
                                              &lt;div class="flex flex-wrap mb-2"&gt;
                                                  &lt;div class="relative w-64px h-64px"&gt;
                                                      &lt;a :href="getUrl(item)"
                                                         class="block w-64px h-64px"&gt;
                                                          &lt;img :src="getFeaturedImage(item.media)" class="max-w-full h-auto mx-auto" :alt="item.name"/&gt;
                                                      &lt;/a&gt;
                                                  &lt;/div&gt;
                                                  &lt;div class="flex flex-1 flex-col ml-2"&gt;
                                                      &lt;h3 class="mb-1 text-base "&gt;
                                                          &lt;a :href="getUrl(item)" class="block hover:text-blue cursor-pointer"&gt;
                                                              &lt;ais-highlight
                                                                      :hit="item"
                                                                      attribute="name"
                                                              /&gt;
                                                          &lt;/a&gt;
                                                      &lt;/h3&gt;
                                                      &lt;div&gt;
                                                          &lt;span class="text-blue text-base font-bold"&gt;{{ item.price | toCurrency }}&lt;/span&gt;
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
  
                                      &lt;/template&gt;
                                  &lt;/ais-hits&gt;
                                  &lt;div v-else /&gt;
                              &lt;/template&gt;
                          &lt;/ais-state-results&gt;
                  &lt;/div&gt;
                  &lt;ais-menu-select attribute="product_categories.name" class="bg-white text-black"&gt;
                      &lt;select slot-scope="{ items, canRefine, refine }"
                              :disabled="!canRefine"
                              @change="refine($event.currentTarget.value)"
                              class="text-black border-0 h-full"
                      &gt;
                          &lt;option value=""&gt;All Categories&lt;/option&gt;
                          &lt;option
                                  v-for="item in items"
                                  :key="item.value"
                                  :value="item.value"
                                  :selected="item.isRefined"
                          &gt;
                              {{ item.label }} ({{ item.count }})
                          &lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/ais-menu-select&gt;
  
                  &lt;button class="btn btn-gray rounded-l-none px-4"&gt;Search&lt;/button&gt;
              &lt;/div&gt;
          &lt;/ais-search-box&gt;
      &lt;/ais-instant-search&gt;
  &lt;/template&gt;
  </code></pre>