Vue.js directives are not working

Question

I am trying to make dynamic form inputs with vue.js. Here is my HTML code.

<div id="multi">
  <form action="{{route('flighttickets.searchMulti')}}" method="post" class="container-fluid">
    {{csrf_field()}}
    <div class="row" v-for="(item, index) in items">
        <div class="form-group col col-sm-3">
          <select v-bind:name="inputName(index, 'from')" v-model="item.from" class="form-control" required>
            <option disabled selected value=''>From</option>
            @foreach($locations as $location)
              <option value="{{$location->id}}">{{$location->name}}({{$location->abbreviation}})</option>
            @endforeach()
          </select>
        </div>
        <div class="form-group col col-sm-3">
          <select v-bind:name="inputName(index, 'to')" v-model="item.to" class="form-control" required>
            <option disabled selected value=''>To</option>
            @foreach($locations as $location)
              <option value="{{$location->id}}">{{$location->name}}({{$location->abbreviation}})</option>
            @endforeach()
          </select>
        </div>
        <div class="form-group col col-sm-3">
          <input type="date" class="form-control" v-model="item.date" v-bind:name="inputName(index, 'date')" required>
        </div>
        <div class="col-auto" v-if="index >= min">
          <button type="button" @click="removeItem(index)" class="close pull-left" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
    </div>
    <div class="row form-group" v-if="items.length <= max">
      <div class="col col-sm-3 offset-sm-6">
        <button type="button" @click="addItem()" class="btn btn-primary pull-right"><i class="fa fa-plus"></i></button>
      </div>
    </div>
    <div class="row form-group">
      <div class="col col-sm-3 offset-sm-6">
        <button type="submit" class="btn btn-primary pull-right"><i class="fa fa-search"></i> Search</button>
      </div>
    </div>
  </form>
</div>

The script

var multi = new Vue({
      el: '#multi',
      data: {
        min: 2,
        max: 7,
        item:{from:'', to:'', date:''},
        items:[ { from: '', to: '', date: '' }, {from: '', to: '', date: ''} ]
      },
      methods: {
        removeItem: function(id) {
          if(this.items.length >= this.min){
            this.items.splice(id, 1);
          }
        },
        addItem: function() {
          if(this.items.length <= this.max) {
            var clone = JSON.parse(JSON.stringify(this.item));
            this.items.push(clone);
          }
        },
        inputName: function(index, property) {
          return "items["+index+"]["+property+"]";
        }
      }
    });

vue.js does not do looping accordingly. According to the script, the form input should show at least 2 and without cancel button when it is less than or equal to 2. But it is not working. see the picture.

Answer 1

It turned out like the blade engine has some issues while compiling. I put this file in a folder together with other views. I found out that the other view had an error. Only then, this file seems to work fine. That's how i fixed it. No code changes needed to this file. Thanks you everyone for your time.