getSourceData(), afterchange Handsontable js vue

Question

I need getSourceData() afterchange but for it, I need too instance handsontable. i don't know to get instance handsontable on vue. Realty I need all row its has edited

ex.

const my_instance = this.$refs.myTable.hotInstance;

console.log(my_instance.getSourceData())

My error

vue.js:634 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'myTable' of undefined"
found in
--->

vue.js:1897 TypeError: Cannot read property 'myTable' of undefined

MY EXAMPLE https://jsfiddle.net/hmwus0xz/

code:

<div id="app">
    <div id="hot-preview">
      <HotTable :settings="settings" ref="myTable"></HotTable>
    </div>
  </div>

new Vue({
  el: "#app",
  data: {
  msg: 'test',
    settings: {
        data: [
          ["", "Ford", "Volvo", "Toyota", "Honda"],
          ["2016", 10, 11, 12, 13],
          ["2017", 20, 11, 14, 13],
          ["2018", 30, 15, 12, 13]
        ],
        colHeaders: true
      },
      afterChange: function (itemodificado, accionHanson) {
            const my_instance  = this.$refs.myTable.hotInstance;

                        console.log(my_instance.getSourceData())
            //mytable 

                if ( accionHanson != 'loadData') {
                    itemodificado.forEach(element => {
                        var fila = my_instance.getSourceData()[element[0]]
                         // fila = my_instance null
                        console.log(fila)
                    });
                }
            },
  },
  components: {
     'hottable': Handsontable.vue.HotTable
  }
})

Answer 1

First, make data as a function and afterChange as an arrow function in order to get this value as a Vue instance.

On loading table hotInstance will be null(only once). Check it to avoid errors.

new Vue({
  el: "#app",
  data() {
    return {
      msg: 'test',
      settings: {
        data: [
            ["", "Ford", "Volvo", "Toyota", "Honda"],
            ["2016", 10, 11, 12, 13],
            ["2017", 20, 11, 14, 13],
            ["2018", 30, 15, 12, 13]
          ],
          colHeaders: true,
          afterChange: (itemodificado, accionHanson)=> {
            if(!this.$refs.myTable.hotInstance) return;
            const my_instance  = this.$refs.myTable.hotInstance;
            console.log(my_instance.getSourceData())
            //mytable 

                if ( accionHanson != 'loadData') {
                    itemodificado.forEach(element => {
                        var fila = my_instance.getSourceData()[element[0]]
                         // fila = my_instance null
                        console.log(fila)
                    });
                }
            },
          },
      }
  },    
  components: {
     'hottable': Handsontable.vue.HotTable
  }
})

https://jsfiddle.net/hansfelix50/ev509wu6/