title: Vuejs DOM doesn't update after fetching data
body: <p>I have bound an array <code>events</code> to a component tag <code>&lt;scheduler&gt;</code> containing events to fill in a scheduler app (dhtmlx scheduler). However, <strong>the DOM doesn't seeem to refresh itself</strong> when data is retrieved by the <code>getEvents</code> methods triggered when vue instance is created.</p>
  
  <p>There is 2 vue files I work with: App.vue containing the main app component and the Scheduler.vue file containing the scheduler component.</p>
  
  <p>The thing is that when I modify something in the Scheduler.vue file and save it, it correctly take the updated <code>events</code> array into account.
  Scheduler parse the data in the <code>events</code> prop when DOM is mounted in scheduler component.</p>
  
  <p>Therefore is there something I can do to get the updated array ?</p>
  
  <p>Here is the <strong>App.vue</strong>:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;div class="container"&gt;
        &lt;scheduler v-bind:events="events"&gt;&lt;/scheduler&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Scheduler from './components/Scheduler.vue';
  import auth from './components/auth/index'
  import data from './components/data/index'
  
  export default {
    name: 'app',
    components: {
      Scheduler
    },
    data() {
      return {
        events: []
      }
    },
    created() {
      this.getEvents();
    },
    watch: {
      events: function(value) {
        console.log('updated');
      }
    },
    methods: {
      async getEvents() {
        try {
          const token = await auth.getToken(this);
          const thattoken = await auth.getThatToken(this, token);
          await data.getOgustData(this, token, '/calendar/events', 307310564, this.events);
        } catch (e) {
          console.log(e);
        }
      },
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is <strong>Scheduler.vue</strong>:</p>
  
  <pre><code>&lt;template lang="html"&gt;
    &lt;div ref="scheduler_here" class="dhx_cal_container" style='width:100%; height:700px;'&gt;
      &lt;div class="dhx_cal_navline"&gt;
        &lt;div class="dhx_cal_prev_button"&gt;&amp;nbsp;&lt;/div&gt;
        &lt;div class="dhx_cal_next_button"&gt;&amp;nbsp;&lt;/div&gt;
        &lt;div class="dhx_cal_today_button"&gt;&lt;/div&gt;
        &lt;div class="dhx_cal_date"&gt;&lt;/div&gt;
        &lt;div class="dhx_cal_tab" name="day_tab" style="right:204px;"&gt;&lt;/div&gt;
        &lt;div class="dhx_cal_tab" name="week_tab" style="right:140px;"&gt;&lt;/div&gt;
        &lt;div class="dhx_cal_tab" name="month_tab" style="right:76px;"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="dhx_cal_header"&gt;&lt;/div&gt;
      &lt;div class="dhx_cal_data"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import 'dhtmlx-scheduler'
  import 'dhtmlx-scheduler/codebase/locale/locale_fr';
  import 'dhtmlx-scheduler/codebase/ext/dhtmlxscheduler_readonly.js';
  
  export default {
    name: 'scheduler',
    props: {
      events: {
        type: Array,
        default () {
          return [{
            id: '',
            text: '',
            start_date: '',
            end_date: '',
          }]
        }
      }
    },
    mounted() {
      scheduler.config.xml_date = '%Y-%m-%d %H:%i';
      // disable left buttons on lightbox
      scheduler.config.buttons_left = [];
      // enable cancel button on lightbox's right wing
      scheduler.config.buttons_right = ['dhx_cancel_btn'];
      // changing cancel button label
      scheduler.locale.labels['icon_cancel'] = 'Fermer';
      // hide lightbox in month view
      scheduler.config.readonly_form = true;
      // hide select bar in day and week views
      scheduler.config.select = false;
      scheduler.config.lightbox.sections = [
        {
          name: "description",
          height: 20,
          map_to: "text",
          type: "textarea",
          focus: true
        }
      ];
  
      scheduler.init(this.$refs.scheduler_here, new Date(), 'month');
      scheduler.parse(this.$props.events, 'json');
    },
  }
  &lt;/script&gt;
  
  &lt;style lang="css" scoped&gt;
    @import "~dhtmlx-scheduler/codebase/dhtmlxscheduler.css";
  &lt;/style&gt;
  </code></pre>