title: Fullcalendar does not display the events
body: <p>I cannot display the events in the fullcalendar, I am using vue and vuex to develop a laravel nova compoment with a modal window, I already try in some many ways but without success. I hope anyone can help me.</p>
  <p>my store is this:</p>
  <pre><code>import Vuex from 'vuex';
  
  Nova.booting((Vue, router, store) =&gt; {
    Vue.component('fullcalendar', require('./components/Tool'))
  
    Vue.use(Vuex);
  
    Nova.store = new Vuex.Store({
      state: {
        event: [],
        events: [],
      },
  
      mutations: {
        SET_EVENT(state, event) {
            state.event = event;
        },
        ADD_TO_EVENTS(state, event) {
            state.events.push(event);
        }
      },
  
      actions: {
        setEvent(context, event) {
          context.commit('SET_EVENT', event);
        },
        addToEvents(context, event) {
          context.commit('ADD_TO_EVENTS', event);
        },
      },
  
      getters: {
        event: state =&gt; state.event,
        events: state =&gt; state.events,
      },
    });
  })
  </code></pre>
  <p>my Tool.vue is this</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      event {{ events }}
      &lt;FullCalendar ref=&quot;fullcalendar&quot; :options=&quot;calendarOptions&quot;/&gt;
      &lt;modal :show=&quot;showModal&quot; @close=&quot;showModal = false&quot;&gt;&lt;/modal&gt;
      &lt;button id=&quot;show-modal&quot; @click=&quot;showModal = true&quot;&gt;&lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  import FullCalendar from '@fullcalendar/vue';
  import dayGridPlugin from '@fullcalendar/daygrid';
  import timeGridPlugin from '@fullcalendar/timegrid';
  import listGridPlugin from '@fullcalendar/list';
  import interactionPlugin from '@fullcalendar/interaction';
  
  import modal from './Modal.vue';
  
  export default {
    
    props: ['resourceName', 'resourceId', 'panel'],
  
    components: {
      modal,
      FullCalendar, // make the &lt;FullCalendar&gt; tag available
    },
  
    data() {
      return {
        
        showModal: false,
        calendarOptions: {
          plugins: [ dayGridPlugin, timeGridPlugin, listGridPlugin, interactionPlugin ],
          initialView: 'dayGridMonth',
          events: this.events,
          editable: true,
          select: this.handleDateClick,
          eventClick: this.handleEventClick,
          buttonText: {
              today: 'Today',
              month: 'Month',
              week: 'Week',
              day: 'Day',
              list: 'Agenda'
            },
          headerToolbar : {
            end: 'prevYear,prev today next,nextYear',
            center: 'title',
            start: 'dayGridMonth,timeGridWeek,timeGridDay listMonth',
          },
          stickyHeaderDates: true,
          aspectRatio: 2.4,
          navLinks: true,
          selectable: true,
          nowIndicator: true,
          dayMaxEventRows: true,
          dayMaxEvents: 10,
          moreLinkClick: 'popover',
          businessHours: {
            daysOfWeek: [ 1, 2, 3, 4, 5 ], // Monday - Thursday
            startTime: '8:00', 
            endTime: '18:00', 
          }
        }
      }
    },
  
    mounted() {
      this.showModal = false;
    },
  
    computed: {
      events: () =&gt; { 
        return Nova.store.getters.events;
      },
    },
  
    methods: {
      handleDateClick(arg) {
        const event = {
          title:'something',
          start: moment(arg.start).format('YYYY-MM-DD'),
          end: moment(arg.end).format('YYYY-MM-DD'),
          allDay: true,
        };
        Nova.store.dispatch('setEvent', event);
        this.showModal = true;
      },
  
      handleEventClick(event) {
          this.showModal = true;
      },
     
    },
  
  }
  &lt;/script&gt;
  </code></pre>
  <p>my modal window file is this</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      event {{ events }}
      &lt;FullCalendar ref=&quot;fullcalendar&quot; :options=&quot;calendarOptions&quot;/&gt;
      &lt;modal :show=&quot;showModal&quot; @close=&quot;showModal = false&quot;&gt;&lt;/modal&gt;
      &lt;button id=&quot;show-modal&quot; @click=&quot;showModal = true&quot;&gt;&lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  import FullCalendar from '@fullcalendar/vue';
  import dayGridPlugin from '@fullcalendar/daygrid';
  import timeGridPlugin from '@fullcalendar/timegrid';
  import listGridPlugin from '@fullcalendar/list';
  import interactionPlugin from '@fullcalendar/interaction';
  
  import modal from './Modal.vue';
  
  export default {
    
    props: ['resourceName', 'resourceId', 'panel'],
  
    components: {
      modal,
      FullCalendar, // make the &lt;FullCalendar&gt; tag available
    },
  
    data() {
      return {
        
        showModal: false,
        calendarOptions: {
          plugins: [ dayGridPlugin, timeGridPlugin, listGridPlugin, interactionPlugin ],
          initialView: 'dayGridMonth',
          events: this.events,
          editable: true,
          select: this.handleDateClick,
          eventClick: this.handleEventClick,
          buttonText: {
              today: 'Today',
              month: 'Month',
              week: 'Week',
              day: 'Day',
              list: 'Agenda'
            },
          headerToolbar : {
            end: 'prevYear,prev today next,nextYear',
            center: 'title',
            start: 'dayGridMonth,timeGridWeek,timeGridDay listMonth',
          },
          stickyHeaderDates: true,
          aspectRatio: 2.4,
          navLinks: true,
          selectable: true,
          nowIndicator: true,
          dayMaxEventRows: true,
          dayMaxEvents: 10,
          moreLinkClick: 'popover',
          businessHours: {
            daysOfWeek: [ 1, 2, 3, 4, 5 ], // Monday - Thursday
            startTime: '8:00', 
            endTime: '18:00', 
          }
        }
      }
    },
  
    mounted() {
      this.showModal = false;
    },
  
    computed: {
      events: () =&gt; { 
        return Nova.store.getters.events;
      },
    },
  
    methods: {
      handleDateClick(arg) {
        const event = {
          title:'something',
          start: moment(arg.start).format('YYYY-MM-DD'),
          end: moment(arg.end).format('YYYY-MM-DD'),
          allDay: true,
        };
        Nova.store.dispatch('setEvent', event);
        this.showModal = true;
      },
  
      handleEventClick(event) {
          this.showModal = true;
      },
     
    },
  
  }
  &lt;/script&gt;
  </code></pre>
  <p>Do you have any clue why I can see the event in the calendar?</p>
  <p>I appreciate any help</p>
  <p>Thks,</p>