Register Component in VueJS

My PrayerTimeComponent.vue component is like below.

<template>
    <div v-if="!data">Loading...</div>
    
    <div v-else class="form-group">
        <label>Select Mosque:</label>
        <select class='form-control'>
            <option value='0'>Select Mosque</option>
            <option :key="mosque.id" v-for="mosque in mosques">
                {{mosque.name}}
            </option>
        </select>
    </div>
    
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.');
        },
        data(){
            return {
                mosques: []
            }
        },
        methods:{
            getMosques: function(){
                axios.get('/api/v1/getMosques')
                .then(function (response) {
                    this.mosques = response.mosques;
                    console.log('hello');
                }.bind(this));
            }
        },
        created: function(){
            this.getMosques()
        }
    }
</script>

My app.js file is like below.

require('./bootstrap');

window.Vue = require('vue').default;

Vue.component('prayertime-component', require('./components/PrayerTimeComponent.vue').default);

const app = new Vue({
    el: '#app',
});

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

I am not getting any output. I am getting white blank page.