in a for loop I've an input element (type number) whose value I want to modify by a decrease and increase button:

<div class="s-featured-list__item s-featured-list__item--expandable" v-for="(item, itemIndex) in category.items" :key="item">
    <button class="button--decrease" @click="decreaseInput(catIndex, itemIndex)">
      <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
        <use href="#icon-minus-16" xlink:href="#icon-minus-16"></use>
      </svg>
    </button>
    <input class="stepper__input" :ref="'fooditem_' + catIndex + '_' + itemIndex" :value="item.min !== '' ? item.min : 1" :min="item.min !== '' ? item.min : 1" type="number" >
    <button class="button--increase" @click="increaseInput(catIndex, itemIndex)">
      <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
        <use href="#icon-plus-16" xlink:href="#icon-plus-16"></use>
      </svg>
    </button>
    </div>

I am setting the min attribute conditionally and also want to set the initial value of the element to the correct minimum value.

This works fine and also decreasing and increasing works fine with the following methods:

<script>
export default {
...
  methods: {
    decreaseInput(catIndex, itemIndex) {
      const item = this.$refs[`fooditem_${catIndex}_${itemIndex}`];
      if(item && item[0] && parseInt(item[0].min) < parseInt(item[0].value) ){
        item[0].value = item[0].value - 1;
      }
    },
    increaseInput(catIndex, itemIndex) {
      const item = this.$refs[`fooditem_${catIndex}_${itemIndex}`];
      if(item && item[0]){
        item[0].value = parseInt(item[0].value) + 1;
      }
    }
  }
}
</script>

My problem is, that whenever the component renders again (e.g. because I'm modifying a value or whatever), the value of the input is set back to the minimum value.

How do I set the value only once to the minimum value and then keep the modified value by the user?

Thanks in advance for your help!