Vue: изменение значения свойства данных, используемого в v-модели, не отображает вновь установленное значение

Question

В настоящее время я создаю шаговый компонент, используя Vue с Vuex. Каждый шаг является компонентом, который содержит поля ввода. Каждый шаг сохраняет значения полей ввода в хранилище Vuex. При переходе к предыдущему шагу уже имеющиеся данные должны быть загружены из хранилища и отображены в соответствующем поле ввода.

Я использую пользовательский компонент ввода, который правильно реализует директиву v-модели.

<custom-input v-model="amount"
              v-bind:type="'number'"></custom-input>

«сумма» определяется в функции данных:

data: function () {
  return {
    amount: null
  }
}

Теперь я пытаюсь установить значение свойства v-model, когда компонент монтируется.

mounted() {
  this.amount = this.$store.state.fields.amount.value;
}

С помощью инструментов отладки я вижу, что хранилище содержит правильное значение. То же самое относится к количеству data-свойство компонента.

Я также пытался установить свойство с помощью метода set следующим образом:

this.$set(this.$data, 'amount', this.$store.state.fields.amount.value);

Но он все равно не отображается в пользовательском вводе.

Как правильно установить свойство данных, используемое в v-модели, чтобы оно отображалось в поле ввода?

EDIT

Компонент пользовательского ввода реализован так:

<input type="'text'" v-on:input="onInput">

onInput: function (event) {
  this.$emit('input', event.target.value);
}

Answer 1

Проблема заключалась в том, что я фактически не связывал свойство value в компоненте пользовательского ввода.Добавление этого исправило проблему:

<custom-input ... :value="value" />