Spark Notifications Panel (View) not rendering correctly?

https://imgur.com/a/3ia2lmP

notifications.blade.php (has not been edited, exactly the same as fresh install):

<div>
    <div class="modal docked docked-right" id="modal-notifications" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header text-center">
                    <div class="btn-group">
                        <button class="btn btn-default" :class="{'active': showingNotifications}" @click="showNotifications" style="width: 50%;">
                            Notifications
                        </button>

                        <button class="btn btn-default" :class="{'active': showingAnnouncements}" @click="showAnnouncements" style="width: 50%;">
                            Announcements <i class="fa fa-circle text-danger p-l-xs" v-if="hasUnreadAnnouncements"></i>
                        </button>
                    </div>
                </div>

                <div class="modal-body">
                    <!-- Informational Messages -->
                    <div class="notification-container" v-if="loadingNotifications">
                        <i class="fa fa-btn fa-spinner fa-spin"></i>Loading Notifications
                    </div>

                    <div class="notification-container" v-if=" ! loadingNotifications && activeNotifications.length == 0">
                        <div class="alert alert-warning m-b-none">
                            We don't have anything to show you right now! But when we do,
                            we'll be sure to let you know. Talk to you soon!
                        </div>
                    </div>

                    <!-- List Of Notifications -->
                    <div class="notification-container" v-if="showingNotifications && hasNotifications">
                        <div class="notification" v-for="notification in notifications.notifications">

                            <!-- Notification Icon -->
                            <figure>
                                <img v-if="notification.creator" :src="notification.creator.photo_url" class="spark-profile-photo">

                                <span v-else class="fa-stack fa-2x">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i :class="['fa', 'fa-stack-1x', 'fa-inverse', notification.icon]"></i>
                                </span>
                            </figure>

                            <!-- Notification -->
                            <div class="notification-content">
                                <div class="meta">
                                    <p class="title">
                                        <span v-if="notification.creator">
                                            @{{ notification.creator.name }}
                                        </span>

                                        <span v-else>
                                            {{ Spark::product() }}
                                        </span>
                                    </p>

                                    <div class="date">
                                        @{{ notification.created_at | relative }}
                                    </div>
                                </div>

                                <div class="notification-body" v-html="notification.parsed_body"></div>

                                <!-- Notification Action -->
                                <a :href="notification.action_url" class="btn btn-primary" v-if="notification.action_text">
                                    @{{ notification.action_text }}
                                </a>

                            </div>
                        </div>
                    </div>

                    <!-- List Of Announcements -->
                    <div class="notification-container" v-if="showingAnnouncements && hasAnnouncements">
                        <div class="notification" v-for="announcement in notifications.announcements">

                            <!-- Notification Icon -->
                            <figure>
                                <img :src="announcement.creator.photo_url" class="spark-profile-photo">
                            </figure>

                            <!-- Announcement -->
                            <div class="notification-content">
                                <div class="meta">
                                    <p class="title">@{{ announcement.creator.name }}</p>

                                    <div class="date">
                                        @{{ announcement.created_at | relative }}
                                    </div>
                                </div>

                                <div class="notification-body" v-html="announcement.parsed_body"></div>

                                <!-- Announcement Action -->
                                <a :href="announcement.action_url" class="btn btn-primary" v-if="announcement.action_text">
                                    @{{ announcement.action_text }}
                                </a>

                            </div>
                        </div>
                    </div>
                </div>

                <!-- Modal Actions -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>