Reloading page via browser loads a default calendar not from sources...

[patrickcurl]

So,

if I do an f5 or ctrl+R refresh on firefox, I'm getting 2 calendars.

If I click on the vue-router links for events, like go to a different link, then back it loads fine.

The one I want is on the bottom, the one on top looks to be a boilerplate or something...(see image) it has some default events like long event, full-day event, repeating events, etc.. None of which come from the data. Here's my full component.

<template>
    <div>
    <div class="main-content">
    <div class="row">
        <div class="col-md-12">
            <div class="box-content">
                <h4 class="box-title with-control">Event Calendar <span class="controls">
                        <button
                                class="btn btn-sm btn-success waves-effect waves-light" @click="createEvent">New Event</button></span></h4>
                <full-calendar ref="calendar" defaultView='month' :events="events" :config="fcConfig"></full-calendar>
            </div>
        </div>
    </div>
    </div>

    </div>
</template>

<script>
    export default {
        mounted() {
            axios.get('/admin/events').then((response) => {
                this.events = response.data.events;
                for (var i = 0; i < this.events.length; i++) {
                    this.addEvent(this.events[i]);
                }
            });
                this.refreshEvents();
        },
        data() {
            return {
                events: [],
                selectedEventId: 0,
                fcConfig: {
                    timeFormat: 'h:mma',
                    eventClick: (event) => {
                        window.location.href = '/admin#/events/' + event.id + '/edit';
                    }
                }
            }
        },
        methods: {
            createEvent() {
                window.location.href = '/admin#/events/new';
            },

            editEvent() {
                $("#edit-modal").modal('show');
            },

            refreshEvents() {
                this.$refs.calendar.$emit('reload-events');
            },

            addEvent(event) {
                this.$refs.calendar.$emit('render-event', event, 'stick');
            }
        }
    }
</script>

[BrockReece]

Maybe I have misunderstood but I can only see one image? Is the issue that the events are duplicating?

[patrickcurl]

The issue is that --calendar shouldn't be there.. there's one beneath it as well that has the real events from the api.. I just screenshotted the top calendar, not the bottom one...

[BrockReece]

I'm afraid that I can't replicate this issue. There isn't anything in this plugin that would be loading those other events either.

I have made a Code Sandbox based on your code above, but it seems to be working as I would expect.