Vue Component not showing - Passport Implemenation Laravel 5.4

I am trying implement passport using Laravel 5.4 and I have followed the official documentation step by step. Everything seems to be working fine as per instructions till the point I hit "Frontend Quickstart"

As instructed I published the vendor using

php artisan vendor:publish --tag=passport-components

This gave me the components as expected. After which I registered my components in my app.js

app.js

/**
 * Add the CSRF Token to the Laravel object. The Laravel object is being 
 * used by Axios and the reference can be seen in ./bootstrap.js
 * 
 * Requires the token be set as a meta tag as described in the documentation:
 * https://laravel.com/docs/5.4/csrf#csrf-x-csrf-token
 */

window.Laravel = { csrfToken: document.head.querySelector("[name=csrf-token]").content }

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

/**
 * The Vue components for managing the OAuth setup
 */

Vue.component(
    'passport-clients',
    require('./components/passport/Clients.vue')
);

Vue.component(
    'passport-authorized-clients',
    require('./components/passport/AuthorizedClients.vue')
);

Vue.component(
    'passport-personal-access-tokens',
    require('./components/passport/PersonalAccessTokens.vue')
);

/**
 * Instantiate Vue for use 
 */

const app = new Vue({
    el: '#app'
});

I installed the dependencies and build the components

npm install 
npm dev run

Placed the components in my home.blade.php (test purpose)

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">Dashboard</div>

                <div class="panel-body">
                    <passport-clients></passport-clients>
                    <passport-authorized-clients></passport-authorized-clients>
                    <passport-personal-access-tokens></passport-personal-access-tokens>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

But nothing shows up in the view. I tried searching a lot in this topic but all the solutions seems to be pointing towards the gulp config. But Laravel 5.4 doesn't use gulp anymore it uses webmix.

I have been struggling with this for a while now, looking for the communities expert option to help be get through this.

Thanking You.

via Genocide_Hoax