title: Update Full calendar Vue events with data from API after an input outside the calendar
body: <p>I'm using the FullCalendar package as a <a href="https://fullcalendar.io/docs/vue" rel="nofollow noreferrer">Vue component (docs)</a>. I have a form with a select input and the calendar component.</p>
  <p>Only when this select input has a value or gets changed I want to set events on the calendar by making an API request that is returning me the events that are linked to this value from the select input. After making this request I want to update my calendar events to the ones received from my API call.</p>
  <p>I tried using the <code>render()</code> and <code>refetch-events</code> on calendarApi after updating the events but no updates are occurring.</p>
  <p>How can I achieve this?</p>
  <p>Code:</p>
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;div class=&quot;card&quot;&gt;
              &lt;card-item :label-name=&quot;translations.labels.building&quot; :error=&quot;errors.building&quot; required=&quot;true&quot;
                         :help-text=&quot;null&quot;&gt;
                  &lt;multiselect v-model=&quot;buildingValue&quot; @select=&quot;onBuildingChange&quot; :options=&quot;buildings&quot; :searchable=&quot;true&quot;
                               track-by=&quot;id&quot;
                               label=&quot;name&quot;
                               optionsLimit=&quot;3&quot;
                               openDirection=&quot;bottom&quot;
                               :placeholder=&quot;translations.placeholders.building&quot;&gt;
                  &lt;/multiselect&gt;
              &lt;/card-item&gt;
              &lt;card-item :label-name=&quot;translations.labels.date&quot; :error=&quot;errors.date&quot; required=&quot;true&quot; :help-text=&quot;null&quot;&gt;
                  &lt;FullCalendar ref=&quot;calendar&quot; :options=&quot;calendarOptions&quot;/&gt;
              &lt;/card-item&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>My methods:</p>
  <pre><code>&lt;script&gt;
  import {Durations} from &quot;../enums/durations&quot;;
  import CardItem from &quot;./CardItem&quot;;
  import FullCalendar from '@fullcalendar/vue';
  import dayGridPlugin from '@fullcalendar/daygrid';
  import interactionPlugin from '@fullcalendar/interaction';
  import momentPlugin from '@fullcalendar/moment';
  
  const DateFormat = &quot;YYYY-MM-DD&quot;
  const InitialState = () =&gt; {
      return {
          durationValue: '',
          buildingValue: '',
          errors: {date: null, duration: null, building: null},
          durationOptions: Object.values(Durations).map((duration) =&gt; duration),
          calendarOptions: {
              visibleRange: {
                  start: moment().format(DateFormat),
                  end: moment().add(1, 'month').format(DateFormat)
              },
              plugins: [dayGridPlugin, interactionPlugin, momentPlugin],
              headerToolbar: {
                  start: 'title',
                  center: '',
                  end: ''
              },
              titleFormat: '{MMMM {D}}, YYYY',
              initialView: 'dayGrid',
              weekends: true,
              editable: true,
              events: []
          },
      }
  }
  
  export default {
      name: &quot;SingleReservation&quot;,
      props: ['buildings', 'types', 'companies', 'user', 'translations'],
      components: {
          CardItem,
          FullCalendar
      },
      data() {
          return InitialState()
      },
      methods: {
          onBuildingChange(building) {
              this.getEventsForBuilding(building)
          },
          async getEventsForBuilding(building) {
              try {
                  if (building) {
                      console.log('id', building.id);
                      let {data} = await Nova.request().get(`/nova-vendor/reservation/building-capacities?searchValue=${building.id}`)
                      this.$data.calendarOptions.events = data;
                      this.$refs.calendar.$emit('refetch-events')
                  } else {
                      // if no building
                  }
              } catch (error) {
                  this.$toasted.show('Something went wrong while getting events', {type: 'error'})
              }
          }
      },
  }
  &lt;/script&gt;
  </code></pre>