Incrémenter une variable à chaque action JavaScript

Bonjour à tous !

Je développe un générateur de devis et facture en PHP et JavaScript. Le PHP me permet de générer un PDF et d'enregistrer dans la BDD ce dernier. Le JavaScript me permet de calculer les prix TTC, prix total, ect. en dynamique (AJAX / Vu.js).

J'ai mis en place un script JS de façon a pouvoir ajouté des lignes permettant d'ajouté un produit au devis ou à la facture. Tout cela est fonctionnel, cependant, de la façon que j'ai codé, le "name" des input est à chaque fois le même, ce qui rend impossible la récupération des données en PHP. Voici mon code :

HTML :

<table class="table" width="800" id="app">
     <thead>
    <tr>
      <th>Description</th>
      <th>Qte</th>
      <th>Prix unitaire</th>
      <th>Total HT</th>
      <th>Total TTC</th>
      <th>Actions</th>
    </tr>
     </thead>
     <tbody>
    <tr v-for="(row, index) in rows">
        <td><textarea name="description[0]" value="" /> </textarea></td>
      <td><input name="qte[0]" class="text-right" type="text" v-model="row.quantity"></td>
      <td><input name="prixuni[O]" class="text-right" type="text" v-model="row.price"> €</td>
      <td><input name="prixht[0]" class="text-right" type="text" v-model="row.amount"> €</td>
      <td><input name="prixttc[0]" class="text-right" type="text" v-model="row.amount"> €</td>
      <td><a href="#!" @click.prevent="add(index)">Ajouter</a> <a href="#!" @click.prevent="del(index)">Supprimer</a>
      </td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>Total TTC</td>
      <td><input name="totalttc" class="text-right" type="text" v-model="total"> €</td>
    </tr>
     </tbody>
   </table>

JS :

  var name=0;
 new Vue({
  el: "#app",
   data: {
  rows: [{
   quantity: 0,
    price: 0,
    amount: 0
  }],
  total: 0
   },
   methods: {
  add(index) {
   this.rows.splice(index + 1, 0, {
   quantity: 0,
   price: 0,
   amount: 0,
    })
  },
  del(index) {
   this.rows.splice(index, 1)
  }
   },
   watch: {
  rows: {
   handler() {
   this.rows.map(row => row.amount = Math.round(row.price * row.quantity * 100) / 100)
   this.total = Math.round(this.rows.reduce((accumulator, current) => accumulator + current.amount, 0) * 100) / 100
    },
    deep: true
  }
   }
 })

Lors du clique sur "ajouter", le JS ajoute une ligne mais copie le name de tous les input, à savoir qte[0], prixuni[0], etc.
J'aimerais qu'à chaque ajout de ligne, le name devienne qte[1], prixuni[1], ... puis qte[2], prixuni[2], ... si on ajoute une troisième ligne.

Merci d'avance pou vos réponses !