Vue перерисовывает список когда юзаю unshift

<button @click="add()">Add</button>

<div>
 <Square v-for="(item, i) in items" :key="i" :num="item"></Square>
 </div>

      data() {
        return {
          items: [1, 2, 3]
        }
      }    

          methods: {
            add() {
              this.items.unshift(5);
            }
          },

Square.vue

<div class="square" v-bind:style="{ 'background-color': randomColor() }">{{ num }}</div>

<script>
  export default {
    name: 'Square',

    props: {
      num: Number
    },

    methods: {
      randomColor() {
        const colorList = ['red', 'blue', 'green', 'yellow', 'orange', 'purple'];

        const randomColorId = Math.floor(Math.random() * (colorList.length-1));

        return colorList[randomColorId];
      }
    }
  }
</script>

Фон у квадратов меняется при добавлении элемента в массив через unshift. С push нет проблем.