El componente tiene una etiqueta <select> , cuyo valor cambia a otro componente usando v-for :

 <template> <div class="game-board"> <div class="minesweeper-grid" :style="{ width: gridStyleSize, height: gridStyleSize, fontSize: difficulty.fontSize }" > <div class="cells"> <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!! --> <Cell v-for="i in gridSize" :key="Math.random() + i" :style="{ width: difficulty.cellSize + 'px', height: difficulty.cellSize + 'px', }" /> </div> </div> </div> </template> <script> import Cell from './Cell.vue' export default { name: 'Game Board', components: { Cell }, props: { difficulty: {type: Object, required: true}, // changes when the value in select changes }, computed: { gridSize() { return Math.pow(this.difficulty.size, 2) }, gridStyleSize() { const { size, cellSize } = this.difficulty const borderWidth = 20 return `${size * cellSize + borderWidth}px` } }, }; </script>

Vista previa de vídeo

Experimentalmente, descubrí con la ayuda de console.log() que en cada componente Cell.vue llama al enlace de ciclo de vida demount mounted() , pero la página simplemente no responde, incluso el css se desplaza sobre el elemento.

La página se congela solo cuando abro vue-devtools. Sin embargo, después de un cierto período de tiempo, todo se renderiza nuevamente, hasta el próximo cambio en <select>

No hay tal problema en vue 2

Vue 3, Vue Devtools 6.0.12