Why does the "delete" button fire after multiple page reloads?

Question

Vue.js

Hello, there was a problem, the delete button only works when I reload the page 2-3 times, and before that it displays an error:

TypeError: Cannot read properties of undefined (reading 'filter')
at Proxy.removeContact (App.vue:52:45)

I am using Vue 3, Vuex, Axios.
Button code:

async removeContact(id) {
      await this.$store.dispatch('DEL_CONTACTS', id);
      this.contacts = this.contacts.filter(c => c.id !== id);
},

Code from actions:

DEL_CONTACTS: async (context, id) => {
      await axios.delete(`/api/contacts/${id}`);
      context.commit("REMOVE_CONTACTS", id)
}

Mutation code:

REMOVE_CONTACTS: (state, id) => {
      state.contacts = state.contacts.filter(c => c.id !== id);
},

Answer 1

I found what the problem was, the fact is that after creating a contact, I did not immediately assign an ID to him, it was given only after reloading the page.