Button change value of input, but input shows old value

I'm working on an e-commerce website, I want to have a button to add items to cart. When I add a button, value in nbrSeats (my list of values) change (in data), but the input field shows another value.

I put a part of the code here: https://codepen.io/martinrougeron2/pen/MWKdJBb

<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
  <div id="app">
    <button @click="create_list()">Create list</button>
    <div v-for="(i, index) in nbrSeats" :key="index">
      <input
             type="number"
             max="10"
             min="1"
             v-model="nbrSeats[index]"
             style="width: 60px"
             label="Nb. places"
             >
        
      </input>
    <button @click="nbrSeats[index]++">Add</button>
    </div>
<button @click="show()">Show me values</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nbrSeats: [],
      message: 'Welcome to Vue!'
    };
  },
  methods: {
    doSomething() {
      alert('Hello!');
    },
    create_list() {
      for (var i = 0; i < 10; i++) {
        this.nbrSeats.push(1)
      }
    },
    show() {
      console.log(this.nbrSeats)
    },
  }
};
</script>