title: Debugging Vue In chrome does not showing the original vue component
body: <p>I am new in Vue Js. I am developing a project in Laravel 7.* with Vue js.
  <br />
  <strong>My Vue Project  Structure</strong>
  <br />
  <a href="https://i.stack.imgur.com/0DKh8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0DKh8.png" alt="directory structure"></a> 
    <br /></p>
  
  <p><strong>app.js File contains:</strong></p>
  
  <pre><code>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');
  </code></pre>
  
  <p><strong>App.Vue File contains:</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-12 p-0"&gt;
                  &lt;nav class="navbar navbar-expand-sm bg-info navbar-dark"&gt;
                      &lt;div class="container"&gt;
                          &lt;ul class="navbar-nav"&gt;
                              &lt;li class="nav-item"&gt;
                                  &lt;router-link to="/" class="nav-link"&gt;Home&lt;/router-link&gt;
                              &lt;/li&gt;
                              &lt;li class="nav-item"&gt;
                                  &lt;router-link to="/create" class="nav-link"&gt;Create Post&lt;/router-link&gt;
                              &lt;/li&gt;
                              &lt;li class="nav-item"&gt;
                                  &lt;router-link to="/posts" class="nav-link"&gt;Posts&lt;/router-link&gt;
                              &lt;/li&gt;
                              &lt;li class="nav-item"&gt;
                                  &lt;router-link to="/notifications" class="nav-link"&gt;Notifications&lt;/router-link&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/nav&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-12"&gt;
                      &lt;br/&gt;
                      &lt;!--                &lt;transition name="fade"&gt;--&gt;
                      &lt;router-view&gt;&lt;/router-view&gt;
                      &lt;!--                &lt;/transition&gt;--&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;style&gt;
      .fade-enter-active, .fade-leave-active {
          transition: opacity .5s
      }
  
      .fade-enter, .fade-leave-active {
          opacity: 0
      }
  &lt;/style&gt;
  
  &lt;script type="text/babel"&gt;
  
      export default {}
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Webpack.mix file contains</strong></p>
  
  <pre><code>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');
  </code></pre>
  
  <p><strong>bootstrap.js file contains:</strong></p>
  
  <pre><code>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');
  </code></pre>
  
  <p><strong>HomeComponent.vue contains</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="row justify-content-center"&gt;
          &lt;div class="col-md-12"&gt;
              &lt;div class="card card-default"&gt;
                  &lt;div class="card-header"&gt;Home Component&lt;/div&gt;
  
                  &lt;div class="card-body"&gt;
                      I'm the Home Component component.
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          mounted() {
              console.log('Component mounted.')
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Now when I want to debug in Chrome the components don't showing the original components</p>
  
  <p><a href="https://i.stack.imgur.com/01gOr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/01gOr.png" alt="enter image description here"></a></p>
  
  <p>Please help me! What configurations I have missed I can't find it.</p>
  
  <p><strong>Regards</strong></p>