Laravel 5.7 vueJS component is mounted but not in devtools

Question

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

window.Vue.config.devtools = true;
window.Vue.config.debug = true;
window.Vue.config.silent = false;

but no luck. Any idea why this is happening?

EDIT: here is my blade code:

@extends('templates.master')
    @section('content')
        <div id="app">
            <div class="container-fluid">
                <div class="animated fadeIn">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12">
                            <div class="card">
                                <div class="card-header">
                                    <i class="fa fa-align-justify"></i> Create a data list group
                                    <a href="{{ route('datalist.index') }}" class="btn btn-danger float-right text-light"><b><i class="icon-arrow-left"></i></b></a>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-12 col-lg-12">
                                            <form method="POST" action="{{ route('datalist.store') }}">
                                                {{ csrf_field() }}
                                                <div class="form-group">
                                                    <label for="name">Name</label>
                                                    <input type="text" class="form-control" value="{{ old('name') }}" name="name" id="name" aria-describedby="name" placeholder="Enter List Name">
                                                </div>
                                                <div class="form-group">
                                                    <label for="data_list_group_id">Select a group this list belongs to</label>
                                                    <select name="data_list_group_id" class="form-control" id="data_list_group_id" required>
                                                        @foreach($groups as $group)
                                                            <option value="{{ $group->id }}">{{ $group->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <label>Addional Columns</label>
                                                <datalist-column></datalist-column>
                                                @include('snippets.dialogs')
                                                <button type="submit" class="btn btn-primary float-right">Create</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    @endsection
    @section('additionalJS')
        <script src="{{ mix('js/app.js') }}"></script>
    @endsection

Here is my component code:

<template>
    <div>
        <div class="input-group mb-3" v-for="(column, index) in columns">
            <input type="text" class="form-control" placeholder="Column name" aria-label="Column name" aria-describedby="Column name">
            <div class="input-group-append" v-if="(index + 1) == columns.length">
                <button class="btn btn-primary" type="button" :id="index" @click="alert('HERE')">Add Column</button>
            </div>
        </div>
    </div>
</template>

<script>
    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: {}
    }
</script>

and here is my app.js 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'
});

I'm trying to make it something like this:

Answer 1

You have no reactive state meaning you have not specified one. You can specify one like this.

const app = new Vue({
    el: '#app',
    data() {
        return {
            message: 'hello, world!'
        }
    }
});

You'll find all this great stuff and more right here on the documentation