Мутируемый массив

Под мутируемым массивом имеется в виду массив, для которого не требуется перезаписывание, т.е. методы а-ля map, filter и т.д.

С такими массивами достаточно просто работать. Их нужно просто передать, реактивность организует Vue.

Класс

class MutatedArray {
  arr = [0, 1, 2, 3];

  addElement() {
    const lastElem = this.arr.at(-1);
    this.arr.push(lastElem + 1);
  }

  removeElement() {
    this.arr.pop();
  }
}

const instance = new MutatedArray();

export default instance;

Компонент

<template>
  <div class="component-block">
    <span class="name">MutatedArrayOne</span>

    <div>{{ arr.join(', ') }}</div>
    <button @click="addElement">Добавить цифру</button><br />
    <button @click="removeElement">Удалить элемент</button>
  </div>
</template>

<script>
import MutatedArray from '@example-services/MutatedArray';

export default {
  data() {
    return {
      arr: MutatedArray.arr,
      addElement: MutatedArray.addElement.bind(MutatedArray),
      removeElement: MutatedArray.removeElement.bind(MutatedArray),
    };
  },
};
</script>

Результат

MutatedArrayOne

0, 1, 2, 3

MutatedArrayTwo

0, 1, 2, 3