У меня ошибка с: Добавить несколько строк данных, используя Vuejs / Laravel

Question

Я читал об этом коде для системы счетов, чтобы добавить несколько строк, используя Vuejs. Но я не могу понять это в моем собственном коде.

Код: https://codepen.io/jjelic/pen/yevNLZ?editors=1010

Честно говоря, я не слишком понимал код. Я старался изо всех сил, но у меня есть некоторые ошибки.

Во-первых, теперь мой код выглядит так.

лезвие

<div class="col-md-12" v-sortable.tr="rinvoices">
  <div class="form-group col-md-4" v-for="rinvoice in rinvoices" track-by="$index">
    @{{ $index +1 }}
  <label for="">   Amount HT</label>
  <input data-validation="number"  data-validation-help="Be Careful with the amoutn please !" data-validation-error-msg="Only numbers are allowed !" class="form-control" placeholder="Amount" v-model="rinvoices.amount" name="newamount" id="newamount" ></input>
  <button class="btn btn-primary btn-xs" @click="addRow($index)">add row</button>
  <button class="btn btn-danger btn-xs" @click="removeRow($index)">remove row</button>
  </div>
</div> 

Vuejs

Vue.directive('sortable', {
twoWay: true,
deep: true,
bind: function () {
    var that = this;

    var options = {
        draggable: Object.keys(this.modifiers)[0]
    };

    this.sortable = Sortable.create(this.el, options);
    console.log('sortable bound!')

    this.sortable.option("onUpdate", function (e) {            
        that.value.splice(e.newIndex, 0, that.value.splice(e.oldIndex, 1)[0]);
    });

    this.onUpdate = function(value) {            
        that.value = value;
    }
},
update: function (value) {        
    this.onUpdate(value);
}});


 var app = new Vue({
el: '#app',

data: {
rinvoices: {

        amount:'',
       },
},
methods: {

    addRow: function (index) {
        try {
            this.rinvoices.splice(index + 1, 0, {});
        } catch(e)
        {
            console.log(e);
        }
    },
    removeRow: function (index) {
        this.rinvoices.splice(index, 1);
    },
    },

Я получил следующие ошибки:

• $ index "не определен в экземпляре
• Ошибка в директиве sortable bind hook: «Ошибка типа: невозможно преобразовать неопределенный или нулевой объект»
• Ошибка компиляции шаблона:

На мой взгляд, слишком много полей количества.