Goal : faster way autocomplete

Situation: I use vue js, when open the page, execute in mounted()

axios.get('http://127.0.0.1:3000/games/all')
         .then(res=>{
              this.$store.state.games = res.data;
              this.$store.dispatch('GetGames',res.data);
         })
         .catch(err=>console.log(err))

axios get games/all is

router.get('/all',(req,res,next)=>{
  let responseData = {};
  Game.find({},(err,rows)=>{
      if(err) throw err;
      if(rows.length) {
          responseData.result = 1;
          responseData.data = rows;
      }else{
          responseData.result = 0;
      }
      res.json(responseData.data);
    //   console.log(responseData.data);
  });
})

I got a json file like

{
    { gamename:"agricola",
      maxplayer:4,
      minplayer:1,
      mintime:20,
      maxtime:90,
      difficulty:"hard",
    }
}

There are 200~300 columns.

Using vuex

state: {
    games:"",
  },
mutations: {
    getGames(state,payload){
      state.games = payload;
      console.log("받아온 게임",state.games);
    },
}
GetGames:({commit},payload)=>{
      commit('getGames',payload)
    },

When I bring db, using state in store.js file, so I use autocomplete

 const autocomplete = document.querySelector(".autocomplete");
      if (this.gameInput) {
        this.result = this.games.filter((game) => {
          return game.gamename.match(new RegExp(this.gameInput, "i"))
        });
      } else {
        autocomplete.classList.add("disabled");
      }

the gameInput is your typing

Problem: it takes too long to bring the DB (4000ms~) and Data is stored in local storage. Even after receiving the data, I cannot search unless refresh it. so user has to stay until bring the db, and user cannot search game until refresh the page. I want they don't need to refresh my page. thanks for read my question. sorry about my poor English (tear)