Зависает страница после открытия Vue Devtools

В компоненте есть тег <select>, изменяя значение которого, изменяется другой компонент с помощью v-for:

<template>
  <div class="game-board">
    <div class="minesweeper-grid"
      :style="{
         width: gridStyleSize,
         height: gridStyleSize,
         fontSize: difficulty.fontSize
      }"
    >
      <div class="cells">
         <!-- Злосчастный v-for -->
        <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}, // изменяется, при изменении значение в select
   },
   computed: {
      gridSize() {
         return Math.pow(this.difficulty.size, 2)
      },
      gridStyleSize() {
         const { size, cellSize } = this.difficulty
         const borderWidth = 20
         return `${size * cellSize + borderWidth}px`
      }
   },
};
</script>

Опытным путем я выяснил, с помощью console.log(), что в каждом компоненте Cell.vue вызывается жизненный хук mounted, но страница просто не реагирует, даже css hover на элементе. К тому же в другом моем проекте, где я использовал похожую логику, такой проблемы не было

Страница зависает только тогда, когда я открываю вкладку Vue в инструментах разработчика. Однако через какой-то отрезок времени все снова отвисает, до момента следующего изменения в <select> По какой причини происходит это зависание? Vue 3, Vue Devtools 6.0.12