Is it possible with Vue.js to create a computed property whose value can be changed directly?

Question

My computed property receives information from a store action (with an axios call in it) when component mounts initially. However I need to change its value directly later on:

myComputedProperty: {
  get: function () {
    return this.myStoreActionResult;
  },
  set: function (newValue) {
    return newValue
  }
}

With this setup however, I can't change its value:

console.log(this.myComputedProperty)
this.myComputedProperty = 'new value!'
console.log(this.myComputedProperty)

I expected this to display the initial value (based on store information) and then the new value. Instead, it displays twice the initial value: I can't change the computed property's value directly.

Is there a way to achieve that, and if so how?

Answer 1

Computed properties are used for returning a calculated (and cached) value, so you cannot directly set value of it because it doesn't exists at all. Behind computed property are variables that you can set with setter, like in your example. All you need is set new value of referencing variable:

myComputedProperty: {
  get: function () {
    return this.myStoreActionResult;
  },
  set: function (newValue) {
    this.myStoreActionResult = newValue;
    return newValue
  }
}

Using computed variable like in example above is useless, because you indirectly modify original property.