[Vue warn]: Unknown custom element: <notifications> - did you register the component correctly? For recursive components, make sure to provide the "name" option. (found in root instance)

I'm trying to setup two Vue2 components (Modal and Notificaitons) within one element container (#app) and I'm getting the following error:

[Vue warn]: Unknown custom element: notifications - did you register the component correctly? For recursive components, make sure to provide the "name" option. (found in root instance)

I'm not sure if I'm implementing this correctly. Thanks in advance for the help and any coding criticisms are welcome. I'm trying to do this the correct way.

Here is my setup:

app.js

Vue.component('modal', require('./components/Modal.vue'));

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

    methods: {

        clearForm: function () {

            window.location='/parts';

        }

    }
});

Vue.component('notifications', require('./components/Notifications.vue'));
const notifications = new Vue({
    el: '#app'
});

Modal.vue

<template>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel"><slot name="modal-title"></slot></h4>
                </div>
                <div class="modal-body">
                    <slot name="modal-body"></slot>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        Cancel
                    </button>
                    <button type="button" class="btn btn-primary" @click="$emit('clear')">
                        OK
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Modal component ready.')
        }
    }
</script>

Notifications.vue

<template>
    <div id="it-notification" v-if="notifications.length > 0" class="bg-danger">
        <p v-for="notification in notifications">
            {{ notification }}
        </p>
    </div>
</template>

<script>
    export default{

        data() {
            return {
                notifications: []
            };
        },

        methods: {

            getNotifications() {

                this.$http.get('/notifications')
                    .then(response => {
                        this.notifications = response.data;
                    });

                //this.notifications = ['The web server will be shutting down for a repair at 9AM'];

            }

        },

        mounted() {

            this.getNotifications();

            console.log('Notifications component ready.')
        }
    }
</script>

Blade Template

<div id="app" class="container-fluid">

    <notifications></notifications>

    ...

    <modal @clear="clearForm()">
        <p slot="modal-title">ALERT</p>
        <h4 slot="modal-body">Are you sure you want to clear the form?</h4>
    </modal>

    ...

</div>