Изменение элемента напрямую

Изменение элемента напрямую, по типу

this.arr[1] = 'something else';

изначально не реактивно. Vue предлагает использовать конструкцию

Vue.set(<arr>, <index>, <value>);

для изменения элементов массива. В целом ситуация такая же как и в объекте при добавлении нового поля.

TIP

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

Класс

import Vue from 'vue';

class ChangeElementArray {
  arr = ['init', 'init'];

  changeElem() {
    Vue.set(this.arr, 1, 'I\'m changed!');
  }
}

const instance = new ChangeElementArray();

export default instance;

Компонент

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

    <div>{{ arr.join(', ') }}</div>
    <button @click="changeElem">Изменить элемент</button><br />
  </div>
</template>

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

export default {
  data() {
    return {
      arr: ChangeElementArray.arr,
      changeElem: ChangeElementArray.changeElem.bind(ChangeElementArray),
    };
  },
};
</script>

Результат

ChangeElemArrOne

init, init

ChangeElemArrTwo

init, init