title: Laravel 5.7 vueJS component is mounted but not in devtools
body: <p>So i've been pulling my hair out on this problem basically i have my component run a console log code that shows that the component was mounted. but it's not in the dev tools. I have checked i'm on local development env on the config and it also shows in the screenshot that I am. I also put the component in the page I am making it's just not viewable in the devtools. I also tried </p>
  
  <pre><code>window.Vue.config.devtools = true;
  window.Vue.config.debug = true;
  window.Vue.config.silent = false;
  </code></pre>
  
  <p>but no luck. Any idea why this is happening?
  <a href="https://i.stack.imgur.com/23Kd0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/23Kd0.png" alt="enter image description here"></a></p>
  
  <p>EDIT:
  here is my blade code:</p>
  
  <pre><code>@extends('templates.master')
      @section('content')
          &lt;div id="app"&gt;
              &lt;div class="container-fluid"&gt;
                  &lt;div class="animated fadeIn"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-lg-12 col-md-12 col-sm-12"&gt;
                              &lt;div class="card"&gt;
                                  &lt;div class="card-header"&gt;
                                      &lt;i class="fa fa-align-justify"&gt;&lt;/i&gt; Create a data list group
                                      &lt;a href="{{ route('datalist.index') }}" class="btn btn-danger float-right text-light"&gt;&lt;b&gt;&lt;i class="icon-arrow-left"&gt;&lt;/i&gt;&lt;/b&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                                  &lt;div class="card-body"&gt;
                                      &lt;div class="row"&gt;
                                          &lt;div class="col-sm-12 col-md-12 col-lg-12"&gt;
                                              &lt;form method="POST" action="{{ route('datalist.store') }}"&gt;
                                                  {{ csrf_field() }}
                                                  &lt;div class="form-group"&gt;
                                                      &lt;label for="name"&gt;Name&lt;/label&gt;
                                                      &lt;input type="text" class="form-control" value="{{ old('name') }}" name="name" id="name" aria-describedby="name" placeholder="Enter List Name"&gt;
                                                  &lt;/div&gt;
                                                  &lt;div class="form-group"&gt;
                                                      &lt;label for="data_list_group_id"&gt;Select a group this list belongs to&lt;/label&gt;
                                                      &lt;select name="data_list_group_id" class="form-control" id="data_list_group_id" required&gt;
                                                          @foreach($groups as $group)
                                                              &lt;option value="{{ $group-&gt;id }}"&gt;{{ $group-&gt;name }}&lt;/option&gt;
                                                          @endforeach
                                                      &lt;/select&gt;
                                                  &lt;/div&gt;
                                                  &lt;label&gt;Addional Columns&lt;/label&gt;
                                                  &lt;datalist-column&gt;&lt;/datalist-column&gt;
                                                  @include('snippets.dialogs')
                                                  &lt;button type="submit" class="btn btn-primary float-right"&gt;Create&lt;/button&gt;
                                              &lt;/form&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      @endsection
      @section('additionalJS')
          &lt;script src="{{ mix('js/app.js') }}"&gt;&lt;/script&gt;
      @endsection
  </code></pre>
  
  <p>Here is my component code:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;div class="input-group mb-3" v-for="(column, index) in columns"&gt;
              &lt;input type="text" class="form-control" placeholder="Column name" aria-label="Column name" aria-describedby="Column name"&gt;
              &lt;div class="input-group-append" v-if="(index + 1) == columns.length"&gt;
                  &lt;button class="btn btn-primary" type="button" :id="index" @click="alert('HERE')"&gt;Add Column&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          data(){
              return {
                  columns: [''],
              }
          },
          mounted(){
              console.log('Component mounted.');
              this.appendColumn('HERE');
          },
          updated: function () {
          },
          computed: {},
          watch: {},
          methods: {
              appendColumn(name){
                  console.log("HERE");
                  var app = this;
                  app.columns.push(name);
              }
          },
          components: {}
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>and here is my app.js code:</p>
  
  <pre><code>/**
   * 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');
  
  window.Vue = require('vue');
  window.Vue.config.devtools = true;
  window.Vue.config.debug = true;
  window.Vue.config.silent = false;
  /**
   * Next, we will create a fresh Vue application instance and attach it to
   * the page. Then, you may begin adding components to this application
   * or customize the JavaScript scaffolding to fit your unique needs.
   */
  Vue.component('datalist-column', require('./components/DataList/DataListColumn.vue'));
  
  const app = new Vue({
      el: '#app'
  });
  </code></pre>
  
  <p>I'm trying to make it something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/CYSAC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CYSAC.png" alt="enter image description here"></a></p>