Trouble in refresh data of Flexmonster

Hi,
     I can load data for the first time but I can't refresh the data of flexmoster in Vue 2. Please help to solve the problem, thanks! I provide the error and coding (with attachment) at below.
[Error found in Chrome Console]
[Vue warn]: Error in created hook: "TypeError: Cannot read properties of undefined (reading 'flexmonster')"
 
[Coding]

<template>
  <div id="vue">
    <v-btn @click="LoadData" small text color="#6750A4" class="ml-2 mb-2" >
                                    {{ $t("message.resetBtn") }}
    </v-btn>
    {{ iData.length }}
  <Pivot
    ref="pivotContainer"
    toolbar
    height="800"
    v-bind:global="{
        localization: {
           grid: {
              blankMember: ''
           }
        }
    }"
    v-bind:report="{
    dataSource: {
        data: iData,
    },
    options: {
          grid: {
            type: 'flat',
            showTotals: 'off',
            showGrandTotals: 'off'

          },
        }

    }"
    v-bind:licenseKey="'XXXX-XXXX-XXXX-XXXX'">
  </Pivot>
</div>
</template>

<script>
import Pivot from "../components/Pivot"
export default {
    name: 'App',
    components: {
      Pivot
    },
    data: () => ({
        testData:[{    
        "Color" : "green","Country" : "Canada","State" : "Ontario","City" : "Toronto","Price" : 174,"Quantity" : 22
        },
        {
        "Color" : "red","Country" : "USA","State" : "California","City" : "Los Angeles","Price" : 166,"Quantity" : 19
        }],
        iData: null
    }),
    mounted() {
      //Nothing to do
    },
    created(){
         let _this = this;
         this.LoadData();
         
    },

    methods: {
      LoadData() {
        this.iData = "[]"
        //let results = this.$store.getters["dashboard/getDashboardData"].reportB;
        //console.log("results: ",  results);
        this.iData = this.testData;
       
        this.$refs.pivotContainer.flexmonster.updateData();
       
       
        //this.$refs.pivot.flexmonster.connectTo(this.iData);
        //this.$refs.iData = results;
        //this.$refs.pivotContainer.setReport(this.iData);
        //this.$forceUpdate();
        //flexmonster.refresh();
        /*
        this.$refs.pivotContainer.flexmonster.updateData({
          type: "json",
          filename: this.iData,
        });*/
       
        //this.connectJSON();
        debugger;      
       
      },
    }
  }
</script>

 
Angus Yu