reset value of text input in Vue

Question

I am trying to build a reset button by following the instructions for "key-changing" as shown in this blog post. Here is the code:

<template>
  <view>
    <text-input
      :style="{ borderColor: 'gray', borderWidth: 1, backgroundColor: 'white', padding: 10, margin: 5, textAlign: 'right' }"
      v-model="testInput"
      keyboardType="decimal-pad"
      :componentKey="componentKey"
    />
    <button title="reset" :on-press="reset"/>
  </view>
</template>

<script>
export default {
  data() {
    return {
      componentKey: 0,
      testInput: '14'
    }
  },
  methods: {
    reset() {
      this.componentKey += 1;
      console.log('parent ' + this.componentKey);
    }
  }
}
</script>

When initially rendered a text box appears with the value 14 inside. When the user types more digits in, it changes, as expected. However, when the user clicks the Reset button nothing happens. What ever the last number was that the user entered is still displayed. I would've expected the number in the text box to be reset to 14. The reset method is being called and the componentKey is incrementing correctly everytime the Reset button is clicked because this is visible:

parent 1
parent 2
parent 3
parent 4
parent 5

This example shows what appears in the console for 5 button presses. So why isn't the value in the text box being reset to 14?

Answer 1

It happens because in the memory testInput is already what is changed

  reset() {   
  this.componentKey += 1;   
  this.testInput = 14; //ADD THIS   
  console.log('parent ' + this.componentKey);    
  }