fullcalendar - Vue-Full-Calendar refetch-events error -

i having issues refreshing events when add new one. event gets inserted database fine, call

this.$refs.calendar.$emit('refetch-events') 

throws following error:

[vue warn]: error in event handler "refetch-events": "typeerror: $(...).fullcalendar not function" 

here more of code further demonstrate trying do:

<template> <div>     <full-calendar ref="calendar" :event-sources="eventsources"  @day-click="dayselected" @event-selected="eventselected" :config="config"></full-calendar>      <!-- modal component -->     <b-modal ref="my_modal" title="new appointment" @ok="submit" @shown="clearmodalvalues">       <form @submit.stop.prevent="submit">         <label>client:</label>         <b-form-select v-model="selectedclient" :options="clientoptions" class='mb-3'></b-form-select>          <label>service:</label>         <b-form-select multiple v-model="selectedservice" :options="serviceoptions" class='mb-3'></b-form-select>          <label>start time:</label>         <time-picker v-model="mytime"></time-picker>          <label>notes:</label>         <b-form-input textarea v-model="notes" placeholder="notes"></b-form-input>       </form>     </b-modal>     <!-- /modal component -->    </div> </template>  <script> export default {   props: {     staff:{       type: number,       required: true     },   },   data() {     return {       mytime: new date(),       selectedservice: [null],       selectedclient: null,       selectedstarttime: new date(),       notes: null,       serviceoptions: [],       clientoptions: [],       events: [],       config: {         timeformat: 'h(:mm)',         eventclick: (event) => {           console.log('event clicked: '+event.title);         },       },       selected: {},     };   },   computed: {     eventsources() {       return [         {           events(start, end, timezone, callback) {             axios.get('/getevents').then(response => {               callback(response.data)             })           }         }       ]     }   },   mounted() {     this.mytime = new date()     axios.get('/getclients').then(response => this.clientoptions = response.data);     axios.get('/getservices').then(response => this.serviceoptions = response.data);   },   methods: {     clearmodalvalues() {       this.selectedservice = [null];       this.selectedclient = null;       this.selectedstarttime = new date();       this.mytime = new date();       this.notes = null;     },     submit(e) {        axios.post('/addevent/',{'selectedservice':this.selectedservice,'selectedclient':this.selectedclient,'selectedstarttime':this.selectedstarttime,'notes':this.notes}).then(function(response){         //console.log(response.data);         new pnotify({           title: 'success',           text: 'new event has been created',           icon: 'icon-checkmark3',           type: 'success'         });          this.selectedservice = [null];         this.selectedclient = null;         this.selectedstarttime = new date();         this.notes = null;         this.mytime = new date();         // ******** have tried these calls per documentation **********        //this.$refs.calendar.firemethod('refetch-events')         //this.$refs.calendar.fullcalendar.$emit('refetch-events');         //this.$refs.calendar.$emit('refetch-events');          console.log(this.$refs.calendar);       }.bind(this));     },     eventselected(event) {       console.log('event selected: '+event.title);     },     dayselected(date,event,view){       this.$refs.my_modal.show();       this.selectedstarttime = date.format("yyyy-mm-dd hh:mm:ss");       this.mytime = date.todate();     },   }, }; </script> 

according documentation should correct. know late , have been @ couple hours might overlooking simple. again vue-full-calendar , not regular full-calendar. need call refetchevents when add new events in submit method. thanks!

i have found issue, brock help. had multiple versions of jquery running(the html template using calling it).