Using Vue to validate coupon(s)

Hi all,

I have some code (as follows) which is used to validate and return the correct amount using Vue, but after a few updates to the system this has stopped working. Here's what I have using version v0.11.10

// Vue Instance
new Vue({
    el: '#coupons',

    data: {
        coupon: {
            code: '',
            description: '',
            discount: 0
        },
        valid: false,
        finalTotalAmount: 0,
        finalTotal: 0
    },

    ready: function() {
        this.getTotal();
    },

    methods: {
        getTotal: function() {
            this.$http.get('/cartTotal', function(total) {
                var delivery = 399;
                var currentUrl = window.location.pathname;

                if(total < 7500 && currentUrl != '/collection') {
                    this.finalTotalAmount = total + delivery;
                }
                else {
                    this.finalTotalAmount = total;
                }
            });
            console.log(this.finalTotalAmount);
        },
        validate: function() {
            this.$http.get('/validateCoupon/' + this.coupon.code)
                .then(function(coupon) {
                    this.coupon = coupon;
                    this.valid = true;
                    this.coupon.description = 'Great! ' + this.coupon.amount + '% has been applied.';

                    this.calculateDiscountedFinalAmount();
                })
                .error(function() {
                    this.coupon.code = '';
                    this.coupon.description = 'Sorry, that coupon does not exist.';
                });
        },
        calculateDiscountedFinalAmount: function () {
            discountPercentage = this.coupon.amount / 100;
            discountAmount = this.finalTotalAmount * discountPercentage;
            discountedTotal = this.finalTotalAmount - discountAmount;
            return this.finalTotalAmount = Math.round(discountedTotal);
        }
    }
});

// routes 
// Get cart totals
Route::any('cartTotal', 'FrontController@getCartTotal');
Route::any('finalTotal/{total}', function(){
   $total = Request::segment(2);
    \Session::put('finalTotal', $total);
});
Route::any('validateCoupon/{code}', function($code){
    return \App\Coupons::whereCode($code)->firstOrFail();
});

// Controller methods for the routes
public function getCartTotal()
    {
        $total = Cart::total() * 100;
        return response()->json($total);
    }

// html form wrapped in a div with an id of coupons
<input type="text"
                                   name="coupon"
                                   id="coupon"
                                   class="form-control"
                                   v-model="coupon.code"
                                   v-on="blur: validate"
                                   v-attr="disabled: valid"
                            >
                            <p class="label label-primary" v-show="coupon.description" v-text="coupon.description"></p>

I then have two hidden fields to get these values, so I can then pass the corrected price should a valid coupon be entered into my controller to pass to Stripe:

<input type="hidden" name="finalTotalAmount" value="@{{ finalTotalAmount / 100 }}">
<input type="hidden" name="totalNoDelivery" value="@{{ finalTotalAmount  }}">

When I've tried this it seems to be displaying all the HTML and showing finalTotalAmount as either an empty string or NaN