Laravel 5.3, VueJs 2, CSRF token mismatch exception issue.

I'm trying to get the Auth portion of an application I'm building done. I'm using Laravel 5.3 and VueJs 2 as my JS framework.
In my login component, I have something along the lines of this.

<template>
    <form @submit="test" method="POST" action="/test">
        <input v-model='input' type='text'>
        <button type='submit'>Submit</button>
    </form>
</template>

<script>
    export default {
        data() {
            return {
                data: {
                    input: "hello"
                }
            }
        },
        mounted() {
            console.log('Component ready.')
        },
        methods: {
            test: function() {
                this.$http.post('/test', {
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name=_token]').attr('content')
                    }
                })
                .then(res => {
                    console.log(res);
                })
                .catch(err => {
                    console.error(err);
                });
            }
        }
    }
</script>
</template>

Select allOpen in new window

I also have the CSRF token set as metadata in the head of my HTML document.

<meta name="_token" content="{{ csrf_token() }}">

Select allOpen in new window

Laravel 5.3's Illuminate\Foundation\Http\Middleware\VerifyCsrfToken spits the error out, saying there is a token mismatch.
I'm currently var_dumping out all the $request info that gets passed into this class' handle() function.

public function handle($request, Closure $next)
    {
        var_dump($request);
        if (
            $this->isReading($request) ||
            $this->runningUnitTests() ||
            $this->shouldPassThrough($request) ||
            $this->tokensMatch($request)
        ) {
            return $this->addCookieToResponse($request, $next($request));
        }
        throw new TokenMismatchException;
    }

Select allOpen in new window

I don't see the CSRF token being passed with the ajax request I'm sending. What's odd is that if I don't use ajax and do a normal form submit such as

{{csrf_field()}}

Select allOpen in new window

inside the form tags, the middleware successfully auths the token. This leads me to believe this is a problem with ajax/vue-resource that I'm using. I may be doing something wrong but I've scoured google posts/stackoverflow/youtube videos about this issue but nothing's fixed the error. I've done a workaround where I force a XSRF-TOKEN cookie to be compared to the token but this makes me think about security issues and what happens when a user accidentally or unknowingly deletes their cookies while using the application. Not sure if that would cause errors but I've talked to other devs/engineers and they say its not a good idea to force the cookie to be compared in the middleware instead of a CSRF_TOKEN.

Here are some other things I've tried.

').attr('content')
    }
});

//I've also tried sending the token along with the vue-resource post request in the Vue component method as well.

methods: {
  test: function() {
    this.$http.post('/test', {headers: 'X-CSRF-TOKEN: $('meta[name='_token']'.attr('content')}
    ).then(response => console.log(response));
  }
}

Select allOpen in new window

Any advice or insight on why this may be occuring?