Состояние обновления мутации Vuex, вычисляемое свойство никогда не отражает обновления в разметке

Question

Эта проблема давно не затрагивалась, но я сталкиваюсь с чем-то непонятным с моей стороны при использовании вычисляемого свойства для значения textarea.

У меня есть текстовая область, в которой вы вводите вводимый текст, и при вводе он обновляет введенный текст в vuex:

<textarea
ref="inputText"
:value="getInputText"
@input="setInputText"
class="textarea"
placeholder="Your message goes in here"
></textarea>

Нажатием кнопки для перевода текста я вызываю метод handleInput.

handleInput() {
    this.$store.dispatch("translateEnglishToRussian");
},

В моем магазине у меня есть translateEnglishToRussian действие:

translateEnglishToRussian({ commit }) {
    const TRANSLATE_API = "https://XXXXXXXX.us-east-1.amazonaws.com/prod/YYYY/";
    const data = JSON.stringify({ english: this.state.inputText });

    this.$axios
    .$post(TRANSLATE_API, data)
    .then(data => {
        commit("setOutputText", data.translatedText);
        commit("setMP3Track", data.mp3Path);
    })
    .catch(err => {
        console.log(err);
    });
}

Я вижу, это вызывает setOutputText мутация с полезной нагрузкой переведенного текста, в моих инструментах Vue Dev я вижу правильное состояние с переведенным текстом. Однако моя вторая текстовая область, которая используется исключительно для отображения переведенного текста , никогда не обновляется!

Выходная текстовая область:

<textarea
disabled
ref="outputText"
:value="getOutputText"
class="textarea"
></textarea>

Его значение связано с вычисляемым свойством с именем getOutputText:

getOutputText() {
    return this.$store.state.outputText;
}

Что я здесь не так делаю! Любой совет приветствуется. Я подумал, что все должно быть в порядке, поскольку я использую commit в своем действии vuex синхронно (внутри блока then ()).

Редактировать: у меня тот же результат, если я также пытаюсь использовать v-model. Исходный текст вывода из состояния vuex отображается там при загрузке страницы. При переводе я вижу обновление в Vue Dev Tools правильно, но текст в текстовой области никогда не рендерится.

Редактировать # 2: Вот моя setOutputText мутация:

  setOutputText(state, payload) {
    console.log(`state - set output - ${payload}`);
    state.outputText = payload;
  },

Answer 1

После просмотра документов vue для Многострочного текста , вам следует заменить :value="getOutputText" на v-model="getOutputText".

Поскольку это вычисляемое свойство, для использования его в v-model необходимо добавить get и set к вычисляемому свойству

<textarea
  disabled
  ref="outputText"
  v-model="getOutputText"
  class="textarea"
></textarea>

РЕДАКТИРОВАТЬ : За @ Стивен Тетро комментарий, v-model не работал для него, но :value действительно решил проблему в конце.

computed: {
  getOutputText: {
    // getter
    get: function () {
      return this.$store.state.outputText;
    },
    // setter
    set: function (newValue) {
      // there is no need to set anything here
    }
  }
}