Vue Kendo grid TypeError: Cannot read properties of undefined (reading 'selectedKeyNames')

Question

I have a kendo grid with a checkbox for each row and a submit button for the grid in Vue. When some rows checked and submit button pressed below function called:

verifyRequests: function () {
        var grid = $('#kgrid').data("kendoGrid");
        var keyNames = grid.selectedKeyNames();
        var ids = keyNames.map(function (x) { 
            return parseInt(x, 10); 
        });
        var gridData = $("#kgrid").data("kendoGrid").dataSource.data();
        var selected =[];
        ids.forEach(function(number) {
            gridData.forEach(function(dataItem) {
              if(number === dataItem.id) {
                selected.push(dataItem)
              }
            }) 
        });
        alert('number of selected rows' + selected);
    }

but I got this error: TypeError: Cannot read properties of undefined (reading 'selectedKeyNames')