Реактивность массивов в Vue

Реактивность срабатывает даже при изменениях массивов, выводимых через v-for. Давайте для примера сделаем так, чтобы по нажатию на кнопку в массив реактивно добавлялся новый элемент и изменения мгновенно происходили и на экране.

App.vuedata()
{
    return {
        arr: ['a', 'b', 'c'],
    }
}

Выведем элементы этого массива в цикле:

App.vue<template>
    <p v-for="elem in arr">
        {{ elem }}
    </p>
</template>

Сделаем кнопку, по нажатию на которую в массив будет добавляться новый элемент:

App.vue<template>
    <p v-for="elem in arr">
        {{ elem }}
    </p>
    <button @click="add">add</button>
</template>

Реализуем соответствующий метод:

App.vuemethods: {
    add: function () {
        this.arr.push('xxx');
    }
}