Как добавить пустой индекс в список и увеличить его с помощью vuejs и axios

Question

Я получаю данные из массива json и зацикливаюсь на них, чтобы отобразить форму для обновления в базе данных.Я использую v-for для отображения информации, и я хочу добавить или удалить индекс и увидеть визуализацию в моей форме

Я создаю метод для добавления индекса, но консоль возвращает меня

0: {…}
1: {__ob__: Observer}
2: {__ob__: Observer}
3: {label: "", description: "", price: "", qtn: ""}
length: 4

Индекс 0 содержит метаданные (имя поставщика, дата), а индекс 3 является новым, и его нельзя наблюдать. Как это сделать?

Пример Json:

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,
    }
}

Html (iиспользуйте laravel):

 <a href="javascript:void(0)" @click="[[inc()]]" class="btn btn-alt btn-sm btn-success" data-toggle="tooltip" data-original-title="Ajouter"><i class="fa fa-plus"></i></a>


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

<!-- start block fields & boucle js -->
<div class="block" v-for="(value, i) in info" v-bind:key="i.id" v-if="i != 0" style="margin-bottom:45px;">

    <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>
<!-- end boucle & block -->

Vuejs

var updatePdf = new Vue({
    el: '#updatePaper',
    delimiters: ['[[', ']]'],
    data: {
        info: null,
        id: document.querySelector('#boxId').value,
        type: document.querySelector('#type').value,
    },
    methods: {
        inc() {
            this.info[this.info.length] =  {
                'label': '',
                'description': '',
                'price': '',
                'qtn': '',
            }
            console.log(this.info, this.info.length)
        }
    },
    mounted() {
        axios
            .get('/get/doc/' + this.type + '/' + this.id)
            .then(response => (this.info = response.data))
    },
});

, если я нажму на .btn;У меня есть индекс, но я думаю, что он не понят vuejs, мои случаи не упорядочены Можете ли вы помочь мне?Заранее спасибо за ваше время и хорошего дня