На свойство-примитив

Если вам необходимо вычисляемое значение на одно свойство, то это можно реализовать с помощью геттера объекта.

Класс

class PrimitiveGetter {
  prop = {
    value: 'lowercase',
    get valueUp() {
      return this.value.toUpperCase();
    }
  }
}

const instance = new PrimitiveGetter();

export default instance;

WARNING

Обратите внимание, но то, что мы обращаемся к свойству не через this.prop.value, а просто this.value. В данном случае контекстом будет являться именно сам объект prop, а не экземпляр класса.

Компонент

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

    <div><b>prop value:</b> {{ prop.value }}</div>

    <!-- `prop.valueUp()` писать не надо, геттер используется без скобок -->
    <div><b>getter value:</b> {{ prop.valueUp }}</div>

    <button @click="changeProp">Изменить value</button>
  </div>
</template>

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

export default {
  data() {
    return {
      // Получаем только prop
      prop: PrimitiveGetter.prop,
    };
  },
  methods: {
    changeProp() {
      this.prop.value = 'newstring'; // геттер пересчитается автоматически
    }
  }
};
</script>

WARNING

Важно сохранить обращение к геттеру через this.prop.valueUp, таким образом устанавливается корректный контекст.

TIP

Если у вас будет длинное название, то можете сократить его вернув геттер в computed свойстве

computed: {
  up() {
    return this.prop.valueUp;
  }
}

Результат

PrimitiveGetterOne

prop value: lowercase

getter value: LOWERCASE

PrimitiveGetterTwo

prop value: lowercase

getter value: LOWERCASE