Unknown custom element: - did you register the component correctly?

Question

I'm new to vue.js so I know this is a repeated issue but cannot sort this out.

the project works but I cannot add a new component. Nutrition component works, profile does not

My main.js

import Nutrition from './components/nutrition/Nutrition.vue'
import Profile from './components/profile/Profile.vue'

var Vue = require('vue');
var NProgress = require('nprogress');
var _ = require('lodash');

// Plugins
Vue.use(require('vuedraggable'));

// Components
Vue.component('nutrition', Nutrition);
Vue.component('profile', Profile);

// Partials
Vue.partial('payment-fields', require('./components/forms/PaymentFields.html'));

// Filters
Vue.filter('round', function(value, places) {
    return _.round(value, places);
});

Vue.filter('format', require('./filters/format.js'))

// Transitions
Vue.transition('slide', {enterClass: 'slideInDown', leaveClass: 'slideOutUp', type: 'animation'})

// Send csrf token
Vue.http.options.headers['X-CSRF-TOKEN'] = Laravel.csrfToken;

// Main Vue instance
new Vue({
    el: '#app',

    components: {
    },

    events: {
        progress(progress) {
            if (progress === 'start') {
                NProgress.start();
            } else if (progress === 'done') {
                NProgress.done();
            } else {
                NProgress.set(progress);
            }
        },

        'flash.success': function (message) {
            this.$refs.flash.showMessage(message, 'success');
        },
        'flash.error': function (message) {
            this.$refs.flash.showMessage(message, 'error');
        }
    }
});

Profile.vue

 <template>
    <div class="reddit-list">
        <h3>Profile </h3>
        <ul>

        </ul>
    </div>
</template>

<script type="text/babel">

    export default {
        name: 'profile', // this is what the Warning is talking about.

        components: {
        },

        props: {
            model: Array,
        }

    }

</script>

profile.blade.php

@extends('layouts.app')
@section('title', 'Profile')
@section('body-class', 'profile show')
@section('content')
    <script>
        window.Laravel.profileData = []
    </script>
<profile></profile>
@endsection

Whenever I try to go to this page I get:

[Vue warn]: Unknown custom element: <profile> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

I tried doing a local component such as

Vue.components('profile', {
    template: '<div>A custom component!</div>'
});

or even I tried adding the profile into the components in vue but still no luck, can anyone point me in the right direction?

Answer 1

Simply clear the cache on your browser if you run into this problem. Worked pretty well for me

Answer 2

I didn't fixed it but it was fixed by itself it appears some kind of magic called (CACHE). i did have my gulp watch running but i powered off my computer, and then ON again and it works.