Vuejs - Combiner incrémentation et rendu de liste

Bonjour à tous,

J'ai un petit soucis avec vuejs , je m'explique :
J'ai créer un générateur de devis et de facture avec laravel et vuejs. Comme on ne sait pas a l'avance le nombre de ligne dans le devis, j'ai enregistrer dans ma base le tableau en json de toute les données. Ce tableau donne (grosso modo) :

var v = {
    0: {
        'name': 'Alexis',
        'name_seller': 'Test',
        'price': 859,
        'tva': 20,
        'ect...': 'ect',
    },
    1: {
        'label': 'Site wordpress',
        'description': 'blablabla',
        'price': 400,
        'qtn': 2,
    },

    2: {
        'label': 'Extension wordpress',
        'description': 'blablabla',
        'price': 59,
        'qtn': 1,
    }
}

Avec v[0] qui contient les meta informations (le nom du client, du vendeur, la date ect) pour prévenir des modifications en base de données.
Donc le insert, c'est ok
Je souhaite pouvoir faire un update de tout ça , avec la possibilité de rajouté un 3, un 4 ou d'en supprimer. J'ai bientôt finit le côté front mais je ne bloque sur l'incrémentation . J'ai créer une api pour récupérer les données et tout fonctionne. Je ne peux juste pas ajouter d'element dans le rendu de liste . Voici le code :
HTML

                                <div class="block-options pull-right">
                                    <a href="javascript:void(0)" @click="info++"></a>
                                    <a href="javascript:void(0)" @click="info--"></a>
                                </div>

                        <input type="hidden" value="{{$type}}" id="type">
                        <input type="hidden" value="{{$box->id}}" id="boxId">

                         <div class="block" v-for="(value, i) in info" v-bind:key="i.id" v-if="i != 0">

                            <div class="block-title">
                                <h2>Référence n°[[i]] </h2>
                            </div>

                            <!-- start fields -->
                            <div class="form-horizontal form-bordered">

                                <div class="form-group">
                                    <label class="col-md-3 control-label" for="example-text-input">Libellé *</label>
                                    <div class="col-md-9">
                                        <input type="text" class="form-control" :name="'label'+[[i]]" :value="[[value.label]]">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-md-3 control-label" for="example-text-input">Description</label>
                                    <div class="col-md-9">
                                        <textarea rows="4" type="text" class="form-control" :name="'description'+[[i]]">[[value.description]]</textarea>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-md-3 control-label" for="example-text-input">Prix *</label>
                                    <div class="col-md-9">
                                        <input type="number" step="0.01" class="form-control" :name="'price'+[[i]]" :value="[[value.price]]">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-md-3 control-label" for="example-text-input">Quantité *</label>
                                    <div class="col-md-9">
                                        <input type="number" step="0.01" class="form-control" :name="'qtn'+[[i]]" :value="[[value.qtn]]">
                                    </div>
                                </div>

                            </div>
                            <!-- end fields -->

                        </div>

Et le code Vuejs

    var app = new Vue({
        el: '#updatePaper',
        delimiters: ['[[', ']]'],
        data: {
            info: null,
            id: document.querySelector('#boxId').value,
            type: document.querySelector('#type').value,
        },
        mounted() {
            axios
                .get('/get/doc/' + this.type + '/' + this.id)
                .then(response => (this.info = response.data))
        },
    });

Ma question est : Comment augmenter la taille du tableau du style " @click="info++" " ;
Le rendu de liste boucle sur info-1 ; je dois surement créer un nouvel index vide a chaque click et supprimer l'index pour click-- ?

Merci pour avance pour votre aide