Vue components not registering

So I've been working on the project for a while and I took a break to do something else work related and now I got back to it and I'm having a bizzare problem with Vue components not registering.

Everything I did before (my custom Vue components) were working fine. I create a component in JS, I create a template, I add the component to the bootstrap.js and it works.

But now, when I added a new component the same way everything compiles and I don't get any errors but the component is not firing up at all. It's almost as if it's a cache issue but I can't figure out what's going on.

here's my process:

Bootstrap.js inside resources/assets/js/components

require('./../spark-components/bootstrap');
require('./home');

require('./panels/dp-settings-panel');
require('./panels/dp-project-settings');
require('./panels/dp-test-component');  // this is the new component

// header actions bar
require('./headers/dp-actionsheader');
require('./headers/dp-project-actionheader');

// per project settings panel

require('./dp-app-settings-social-network');
require('./dp-app-settings-resolutions');
require('./dp-new-project-social-network');
require('./dp-projects');
require('./dp-project-item');
require('./dp-project');

component inside the blade template:

<dp-test-component :user="user" inline-template>
</dp-test-component>

and JS component:

Vue.component('dp-test-component', {
    props: ['user'],
    data() {
        return {
        };
    },
    mounted() {
        console.log('test component');
    },
    created() {

    },
    computed: {

    },
    watch: {

    },
    methods: {

    }
});

What am I missing here?