Перезаписываемый объект

Ситуация, когда нам нужно перезаписать объект, возникает чаще всего, когда он приходит с сервера. То есть изначально мы инициализируем свойство как null, а потом уже записываем туда итоговый объект.

Переопределить свойство в классе мы не можем, иначе потеряем связь с компонентом. Здесь может пригодится тот же способ, который мы использовали с примитивом.

Класс

class RewritableObject {
  obj = {
    value: null,
  }

  fillObj() {
    this.obj.value = { field: 'field' };
  }
}

const instance = new RewritableObject();

export default instance;

Компонент

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

    <div><b>obj:</b> {{ obj }}</div>
    <button @click="fillObj">Заполнить объект</button>
  </div>
</template>

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

export default {
  data() {
    return {
      obj: RewritableObject.obj,
      fillObj: RewritableObject.fillObj.bind(RewritableObject),
    };
  },
};
</script>

Результат

RewritableObjectOne

obj: { "value": null }

RewritableObjectTwo

obj: { "value": null }