Debugging Vue In chrome does not showing the original vue component

I am new in Vue Js. I am developing a project in Laravel 7.* with Vue js.
My Vue Project Structure

app.js File contains:

require('./bootstrap');

window.Vue = require('vue');
Vue.config.debug = true;
Vue.config.devtools = true;
Vue.config.productionTip = false;
Vue.config.silent = false;

import VueRouter from 'vue-router';
Vue.use(VueRouter);

import VueAxios from 'vue-axios';
import axios from 'axios';

import App from './App.vue';
Vue.use(VueAxios, axios);

import HomeComponent from './components/home/HomeComponent.vue';
import CreateComponent from './components/post/CreateComponent.vue';
import IndexComponent from './components/post/IndexComponent.vue';
import EditComponent from './components/post/EditComponent.vue';
import Notification from './components/Notification.vue';

const routes = [
    {
        name: 'home',
        path: '/',
        component: HomeComponent
    },
    {
        name: 'create',
        path: '/create',
        component: CreateComponent
    },
    {
        name: 'posts',
        path: '/posts',
        component: IndexComponent
    },
    {
        name: 'edit',
        path: '/edit/:id',
        component: EditComponent
    },
    {
        name: 'notify',
        path: '/notifications',
        component: Notification
    }
];

const router = new VueRouter({ mode: 'history', routes: routes});
const app = new Vue(Vue.util.extend({ router }, App)).$mount('#app');

App.Vue File contains:

<template>
    <div class="container-fluid">
        <div class="row">
            <div class="col-12 p-0">
                <nav class="navbar navbar-expand-sm bg-info navbar-dark">
                    <div class="container">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <router-link to="/" class="nav-link">Home</router-link>
                            </li>
                            <li class="nav-item">
                                <router-link to="/create" class="nav-link">Create Post</router-link>
                            </li>
                            <li class="nav-item">
                                <router-link to="/posts" class="nav-link">Posts</router-link>
                            </li>
                            <li class="nav-item">
                                <router-link to="/notifications" class="nav-link">Notifications</router-link>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <br/>
                    <!--                <transition name="fade">-->
                    <router-view></router-view>
                    <!--                </transition>-->
                </div>
            </div>
        </div>
    </div>
</template>

<style>
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s
    }

    .fade-enter, .fade-leave-active {
        opacity: 0
    }
</style>

<script type="text/babel">

    export default {}
</script>

Webpack.mix file contains

const mix = require('laravel-mix');

let productionSourceMaps = false;
if ( ! mix.inProduction()) {
    mix.webpackConfig({
        devtool: 'eval-source-map'
    });
}

mix.sourceMaps(false, type = 'eval-source-map')
    .js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

bootstrap.js file contains:

window._ = require('lodash');

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

window.axios = require('axios');

window.axios.defaults.baseURL = 'http://dshop.test';
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');

HomeComponent.vue contains

<template>
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card card-default">
                <div class="card-header">Home Component</div>

                <div class="card-body">
                    I'm the Home Component component.
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

Now when I want to debug in Chrome the components don't showing the original components

Please help me! What configurations I have missed I can't find it.

Regards