How to bind nested JSON to Kendo Vue grid?

Question

The below JSON is returned by a URL.

JSON:

 {
  "numberOfTransactions": 2,
  "transactions": [
    {
      "Id": "1000497",
      "officeShortId": "DRSD",
      "procedureCode": "1234"
    },
    {
      "Id": "1000497",
      "officeShortId":  "DRSD",
      "procedureCode": "1234"
    }
}

I want to bind all the fields inside "transactions" field to Kendo Vue grid.

I'm able to bind a simple JSON using this code but not able to bind the nested JSON.

It will be great if someone could help.

Vue Code:

  import Vue from 'vue';
  import { GridInstaller } from '@progress/kendo-grid-vue-wrapper';
  import { DataSourceInstaller } from '@progress/kendo-datasource-vue-wrapper';
  import '@progress/kendo-ui';

  Vue.use(GridInstaller)
  Vue.use(DataSourceInstaller);


export default {
  data(){
    return{
      schemaModelFields: {
          patientId: {editable: false, nullable: false },
          officeShortId: { editable: false, nullable: false },
          procedureCode: {editable: false, nullable: false}
      }
    }
  }
}

<template>
  <div>
    <kendo-datasource ref="datasource1"
                      :transport-read-url="'someURL'"
                      :transport-read-data-type="'jsonp'"
                      :schema-model-id="'id'"
                      :schema-model-fields="schemaModelFields"
                      :batch='true'
                      :page-size='10'>
    </kendo-datasource>


    <kendo-grid :height="600"
                :data-source-ref="'datasource1'"
                :pageable='true'>
      <kendo-grid-column :field="'patientId'" :width="120"></kendo-grid-column>
      <kendo-grid-column :field="'officeShortId'"
                         :title="'id'"
                         :width="120"></kendo-grid-column>
      <kendo-grid-column :field="'procedureCode'"
                         :width="120"></kendo-grid-column>
    </kendo-grid>
  </div>
</template>