"indexName is not valid" error in Algolia after Searchable attributes update

Question

I have implemented Algolia Instant Search in a Vue3 app via the Firebase/Algolia extension.

Everything was working fine, I could do searches from my frontend and get the expected results.

Then I changed the Searchable attributes on the Algolia dashboard and suddenly I get only empty results (empty data array in Hits) client side.

When checking the chrome dev tools, network tab, the index name of the request is correct, aswell as the search query. But I also get this message:

{"message":"indexName is not valid","status":400}

When I do the search in the Algolia dashboard, everything works fine, I get the expected results.

The only thing I changed are the searchable attributes on the Algolia dashboard. I have tried with different attributes, aswell as leaving it empty (which should make Algolia search on all fields). The Hits data client side is always empty, as shown in the console.log below.

How can the indexName not be valid if it is correct client side and the search works fine on the Algolia dashboard??

Thanks for any help!!

<template>

  <input type="text" v-model="$store.state.searchInputText" />

  <ais-instant-search :search-client="searchClient" index-name="profiles">
    <ais-search-box
      class="d-none mb-4"
      v-model="$store.state.searchInputText"
      :class-names="{
        'ais-SearchBox-input':
          'search-input form-control form-control-flush ps-10',
      }"
    />

    <ais-hits
      v-if="transformItems.length > 0"
      :transform-items="transformItems"
    >
      <template v-slot:item="{ item }">
        <div class="container">
          <!-- Begin result (profile row) -->
          {{ item.firstname }} {{ item.lastname }}
          <!-- End result (profile row) -->
        </div>
      </template>
    </ais-hits>

    <div class="d-flex justify-content-center flex-nowrap mt-6">
      <button
        class="btn btn-sm btn-primary"
        v-if="$store.state.searchResults.length > 3"
        @click="sendResultsToStore()"
      >
        See all results
      </button>
    </div>

    <div class="mt-4"></div>
  </ais-instant-search>
</template>

<script>
import algoliasearch from "algoliasearch/lite";
import "instantsearch.css/themes/satellite-min.css";
import { goToDetailedProfileExternal } from "../js/navigation";
import store from "../store/index";

export default {
  data() {
    return {
      searchClient: algoliasearch(
        "XXXXXXXXXXX",
        this.$store.state.userData.algoliasearchkey
      ),
      inputtext: "",
    };
  },
  methods: {
    transformItems(items) {
      store.state.searchResults = [];

      for (let i = 0; i < items.length; i++) {
        let profile = items[i];
        profile.id = items[i].objectID;
        store.state.searchResults.push(profile);
      }

      ////////////here is the problem, this is always empty!
      console.log(store.state.searchResults);

      return items.slice(0, 3);
    },
  },
};
</script>

<style>
</style>