Questions about errors encountered while applying vue-flexmonster

Hello.
First of all, I'm sorry for the late reply.
 
The error persists even though it was reflected as guided.
 
The parameters of the updateData function may also be a problem, but the larger problem is that the flexmonster object in the pivot reference is recognized as undefined.
 
Please check the attached file, and the contents below are the source code.
 
 

<template>
   <div id="app">
      <Pivot
         v-if="bindingData.length !== 0"
         toolbar
         ref="pivot"
         v-bind:height="600"
         v-bind:shareReportConnection="{ url: 'https://olap.flexmonster.com:9500', }"
         v-bind:beforetoolbarcreated="customizeToolbar"
         v-bind:ready="onReady"
         _v-bind:licenseKey="key"/>
<!--         v-bind:report="pivotData"-->
   </div>
</template>

<script>
import Vue from "vue";
import Pivot from "vue-flexmonster";
import 'flexmonster/flexmonster.css';

Vue.use(Pivot);

export default {
   name: "stats-component",
   props: {
      pages: {
         type: Array
      },
      rows: {
         type: Array
      },
      columns: {
         type: Array
      },
      measures: {
         type: Array
      },
      bindingData: {
         type: Array
      },
      formats: {
         type: Array
      }
   },
   components: {
      Pivot,
   },
   data: function () {
      return {
         key: String,
         pivotData: {
            dataSource: {
               type: 'json',
               data: this.bindingData
            },
            slice: {
               pages: this.pages,
               rows: this.rows,
               columns: this.columns,
               measures: this.measures,
               expandAll: true
            },
            formats: this.formats,
            options: {
               "grid": {
                  "showTotals": "off",
                  "type": "classic"
               }
            }
         },
      }
   },
   watch: {
      bindingData: {
         handler() {
            this.drawTable();
         }
      }
   },
   mounted() {
      let vm = this;
      vm.$ajax({
         url: '/flexmonster/key',
         type: "GET",
         success: function (value) {
            if (value) {
               vm.key = value;
            } else {
               vm.$commonUtils.alertDialog(vm.$message['alert.system.error']);
            }
         }
      });
   },
   methods: {
      drawTable() {
         const vm = this;

         if (vm.bindingData === undefined || vm.bindingData.length === 0) {
            vm.$commonUtils.alertDialog("해당조건의 데이터가 없습니다.");
            return;
         }

         console.log(this.bindingData);
         vm.$refs.pivot.flexmonster.updateData(vm.pivotData.dataSource);
      },
      onReady: function () {
         const vm = this;
         vm.$refs.pivot.flexmonster.connectTo(vm.pivotData.dataSource);
      },
      customizeToolbar: function (toolbar) {
         toolbar.showShareReportTab = true;
      },
   }
}
</script>

Hello.
Unfortunately, the conditional statement you guided is not carried out.
It is guess that the reference of the if condition is also recognized as undefined.
We are avoiding the use of references due to issues arising from rendering timing of doms, but we have challenged how to use references because there was no other way in vue-flexmonster's guide.
Is there any other way not to use references?
If there is no other way, I will put the transition process to vue-flexmonster on hold, and try to keep it as it is.
 
thank you