The component has a <select> tag, changing the value of which changes another component using 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>

Video preview

Experimentally, I found out with the help of console.log() that in each component Cell.vue calls mounted() lifecycle hook, but the page just doesn't respond, even the css hover on the element.

The page freezes only when I open vue-devtools. However, after a certain period of time, everything is rendered again, until the next change in <select>

There is no such problem on vue 2

Vue 3, Vue Devtools 6.0.12