Why generated build in production makes browser crash - vue.js

Question

I just want to update Vue X store when I click on add button called "Ajouter" but my browser crashes and I should open it again and again.
I already use store in my project and I'm not able to reproduce this issue with another state
I got this issue in production and not in development
I'm using this dependencies :
"core-js": "^3.8.3",
"vue": "^3.2.13",
"vue-class-component": "^8.0.0-0",
"vue-router": "^4.0.3",
"vuex": "^4.0.0"
State
export default {
selectedFoods: [],
currentFood: {},
nutrients: {
energy: 0,
protein: 0,
lipid: 0,
carbohydrate: 0
},
activeFilters: {
energy: false,
protein: false,
lipid: false,
carbohydrate: false
}
}
I would like to update selectedFoods
Mutation
SET_FOOD_QUANTITY (state: OrganizeMealState, param: SelectedFood) {
const selectedFoodsLength = Object.values(state.selectedFoods).length
if (selectedFoodsLength > 0) {
for (let index = 0; index < selectedFoodsLength; index++) {
const food = state.selectedFoods[index]
if (food.food.name === param.food.name) {
state.selectedFoods[index].quantity = param.quantity
return
}
}
}
// ===> crash here
state.selectedFoods.push({
food: param.food,
quantity: param.quantity
})
}
I can't push data into selectedFoods because browser crash
Action
setFoodQuantity ({ commit }: { commit: Commit }, param: SelectedFood) {
commit('SET_FOOD_QUANTITY', param)
},
Component
<template>
<div class="modal fade" id="modal-quantity" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="modal-portion-label" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-quantity-label">Quantité (g)</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" #click="cleanCurrentFood()"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-1">
<input type="number" class="form-control" v-model="quantity">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" #click="cleanCurrentFood()">Fermer</button>
<button type="button" class="btn btn-danger">Réinitialiser</button>
<button type="button" class="btn btn-primary" #click="addQuantity()">Ajouter</button>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import { mapActions, mapGetters } from 'vuex'
import { Food } from '../../domain/food'
import { SelectedFood, Nutrients } from '../../domain/store/OrganizeMealState'
#Options({
computed: {
...mapGetters({
currentFood: 'OrganizeMeal/currentFood',
selectedFoods: 'OrganizeMeal/selectedFoods',
nutrients: 'OrganizeMeal/nutrients'
})
},
methods: {
...mapActions({
setFoodQuantity: 'OrganizeMeal/setFoodQuantity',
cleanCurrentFood: 'OrganizeMeal/cleanCurrentFood'
}),
addQuantity () {
this.setFoodQuantity({
food: this.currentFood,
quantity: this.quantity
})
}
}
})
export default class AddFoodQuantityModal extends Vue {
currentFood!: Food
selectedFoods!: SelectedFood[]
nutrients!: Nutrients
quantity = 0
}
</script>
Here is my modal
If you need to see more code, I share you github project here : https://github.com/wyllisMonteiro/diet-helper
Use devtools result
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App).use(store).use(router).mount('#app')
// eslint-disable-next-line
// #ts-ignore: Unreachable code error
app.config.performance = true
npm run build
Use this extension to serve : https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb
and got this