I wanted to delete one item, but instead its deleting the whole database
In your router code you rely upon the response body to determine what to delete. Yet in your axios code you don't load the response body, you only supply an array element. So...
Change
axios.delete('/api/menu', this.foodItems[itemToRemove])
To
axios.delete('/api/menu', {data:this.foodItems[itemToRemove]})
that simple change should work for you.
Everything looks fine. Though, you need to use :key
binding so that index
would be respected while rendering the list:
<tr v-for="(foodItem, index) in filteredFoodItems" :key="index">
Also, you have link tag and using click handler on it should be prevented it's default:
@click.prevent="removeItem(index)"