TokenMismatchException on AJAX but X-CSRF-TOKEN is included in headers

I'm trying to make a POST using VueJS but I'm getting a Laravel 5.3 TokenMismatchException error.

This is in app.js to cover both jQuery and Vue:

Vue.http.interceptors.push((request, next) => {
    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);

    next();
});

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

This is in the main.blade.php layout where we instantiate the Laravel value:

<script src="{!! asset('/js/app.js') !!}"></script>
<script>
    (function () {
        window.Laravel = {
            csrfToken: ''
        };
    })();
</script>

I've confirmed the CSRF token matches what is expected by Laravel, but still getting this error.

This is super basic stuff and I'm a bit stumped what I misconfigured here. Ideas?

via Chebli Mohamed