Массив с объектами

Если мы хотим полностью заменить один из объектов, как

arr[0] = { }

То это не сработает, также как когда мы обсуждали изменение элемента напрямую. В таком случае нужно использовать конструкцию Vue.set.

А вот в случае, если вы просто хотите изменить свойство, как

arr[0].a = ''

То это сработает. Изменение по ссылке тоже работает, как

const elem = arr[0];
elem.a = '';

Класс

import Vue from 'vue';

class ArrWithObjects {
  arr = [
    { id: 1, a: 'test', b: 'test' },
    { id: 2, a: 'test', b: 'test' }
  ];

  rewriteFirstElem() {
    Vue.set(this.arr, 0, { id: 1, a: 'anotherTest', b: 'test' });
  }

  changePropOfSecond() {
    this.arr[1].a = 'anotherTest'; // Works!
  }

  changeByLink() {
    const elem = this.arr[0];
    elem.a = 'changed by link';
  }
}

const instance = new ArrWithObjects();

export default instance;

Компонент

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

    <div v-for="el in arr" :key="el.id">
      {{ el.a }} {{ el.b }}
    </div>
    <button @click="rewriteFirstElem">Перезаписать первый элемент</button><br />
    <button @click="changePropOfSecond">Изменить свойство второго</button><br />
    <button @click="changeByLink">Изменить по ссылке</button>
  </div>
</template>

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

export default {
  data() {
    return {
      arr: ArrWithObjects.arr,
      rewriteFirstElem: ArrWithObjects.rewriteFirstElem.bind(ArrWithObjects),
      changePropOfSecond: ArrWithObjects.changePropOfSecond.bind(ArrWithObjects),
      changeByLink: ArrWithObjects.changeByLink.bind(ArrWithObjects),
    };
  },
};
</script>

Результат

ArrWithObjectsOne

test test

test test

ArrWithObjectsTwo

test test

test test