Wsrtjtyk

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:

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