Vue: changing value of a data property used in v-model doesn't render the newly set value

Question

I'm currently in the process of creating a stepper component using Vue with Vuex. Each step is a component that holds a input fields. Each step stores the values of the input fields in the Vuex store. When going to a previous step, the already available data should be loaded from the store and displayed in the respective input field.

I'm using a custom input component that implements the v-model directive correctly.

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

"amount" is defined in the data function:

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

Now I'm trying to set the value of the v-model property when the component gets mounted.

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

Through debugging tools I can see that the store holds the correct value. The same is the case for the amount data-property of the component.

I've also tried setting the property using the set method like this:

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

But it still does not show up in the custom-input.

How do I set the data property used in v-model correctly so that it shows up in the input field?

EDIT

The custom-input component is implemented like this:

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

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

Answer 1

The problem was that I did not actually bind the value property within the custom-input component. Adding this fixed the problem:

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