[Vuejs]-Vuejs goes infinite loop warning and stopped working

<form action="{{$route}}" method="post" class="container-fluid" id="sale">
  {{csrf_field()}}
  @if(!empty($isPut))
    {{method_field('PUT')}}
  @endif
  <input type="hidden" name="tickets" value="{{json_encode($ids)}}">
  <div class="form-group row">
    <label for="qty" class="col-sm-2">Quantity</label>
    <input id="qty" class="col col-sm-2 form-control text-right" min='1' type="number" step="1" name="qty" v-model="qty">
  </div>
  <div class="form-group row">
    <label for="ex_rate" class="col-sm-2">Exchange Rate</label>
    <input id="ex_rate" class="col col-sm-2 form-control text-right" min='1' type="number" step="1" name="ex_rate" v-model="ex_rate">
  </div>

  <table class="table table-responsive-md table-bordered">
    <thead class="text-center">
      <tr>
        <th>#</th>
        <th>Itinerary</th>
        <th>Date</th>
        <th>Price Each</th>
        <th>Amount In MMK</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(ticket, index) in tickets">
        <td class="text-right">@{{index + 1}}</td>
        <td>@{{ticket.from_location.abbreviation}} - @{{ticket.to_location.abbreviation}}</td>
        <td>@{{ticket.date}}</td>
        <td class="text-right">@{{ticket.price}} @{{ticket.currency.name}}</td>
        <td class="text-right">@{{amounts[index]}} MMK</td>
      </tr>
      <tr class="text-right">
        <td colspan="4" >Sub Total</td>
        <td><input class="text-right form-control" type="number" step="any" name="discount" v-model="sub_total" readonly></td>
      </tr>
      <tr class="text-right">
        <td colspan="4">Discount</td>
        <td><input class="text-right form-control" type="number" step="any" name="discount" v-model="discount"></td>
      </tr>
      <tr class="text-right">
        <td colspan="4">Total</td>
        <td><input class="text-right form-control" type="number" step="any" name="discount" v-model="total" readonly></td>
      </tr>
    </tbody>
  </table>

  <!-- Passenger Block -->
  <div class="row" v-for="n in qty">
    <div class="form-group col col-6">
      <label for="passengers">Passenger @{{n}}:Name</label>
      <input class="form-control" :name="inputPassengerName(n-1, 'name')" required>
    </div>
    <div class="form-group col col-6">
      <label for="passengers">Passenger @{{n}}:Passport</label>
      <input class="form-control" :name="inputPassengerName(n-1, 'passport')"  required>
    </div>
  </div>


</form>


@push('script')
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        qty: 1,
        ex_rate: 1,
        discount: 0,
        tickets: {!!json_encode($tickets)!!}
      },
      methods: {
        inputPassengerName: function(index, property) {
          return "passengers["+index+"]["+property+"]";
        }
      },
      computed: {
        total: function() {
          return (this.sub_total - this.discount);
        },
        amounts: function() {
          var app = this;
          return app.tickets.map(function(ticket) {
            var result;
            if(ticket.currency.name == "USD"){
              result = (ticket.price * app.qty * app.ex_rate);
            } else if(ticket.currency.name == "MMK"){
              result = (ticket.price * app.qty);
            }
            return result;
          });
        },
        sub_total : function() {
          var app = this;
          return  app.amounts.reduce(function(a, b) {
            return a + b;
          });
        }
      }
    });
  </script>
@endpush

The answer is from PanJunjie潘俊杰
vuejs-how-can-i-use-computed-property-with-v-for