How to access the Sheets property in a Vue Spreadsheet?

This article explains how to access the sheets property in a Vue Spreadsheet.
To do this, create a reference to the Spreadsheet component. Then, use the ej2Instances property from the Spreadsheet reference (this.$refs.spreadsheet.ej2Instances) to access sheet-related properties of the Spreadsheet.

Note: Directly accessing sheet-related properties using the Spreadsheet reference (this.$refs.spreadsheet) will result in undefined.

[app.vue]

<template>
 <div class="control-section">
   <div id="spreadsheet-default-section">
     <button class='e-btn' @click="getSheets">Get Sheets</button>
     <ejs-spreadsheet ref="spreadsheet" :openUrl="openUrl" :saveUrl="saveUrl" :created="created">
       <e-sheets>
         <e-sheet name="Car Sales Report">
           <e-ranges>
             <e-range :dataSource="dataSource"></e-range>
           </e-ranges>
           <e-columns>
             <e-column :width="width1"></e-column>
             <e-column :width="width2"></e-column>
             <e-column :width="width3"></e-column>
             <e-column :width="width3"></e-column>
             <e-column :width="width3"></e-column>
             <e-column :width="width3"></e-column>
           </e-columns>
         </e-sheet>
       </e-sheets>
     </ejs-spreadsheet>
   </div>
 </div>
</template>

<script>
import { SpreadsheetComponent, SheetDirective, RowsDirective, RowDirective, SheetsDirective, ColumnsDirective, ColumnDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-vue-spreadsheet';
import dataSource from "./default-data.json";

export default {
   components: {
   'ejs-spreadsheet': SpreadsheetComponent,
   'e-sheet': SheetDirective,
   'e-sheets': SheetsDirective,
   'e-row': RowDirective,
   'e-rows': RowsDirective,
   'e-column': ColumnDirective,
   'e-columns': ColumnsDirective,
   'e-range': RangeDirective,
   'e-ranges': RangesDirective
  },  
  data: () => {
   return {
     dataSource: dataSource.defaultData,
     width1: 180,
     width2: 130,
     width3: 120,
     openUrl: 'https://services.syncfusion.com/vue/production/api/spreadsheet/open',
     saveUrl: 'https://services.syncfusion.com/vue/production/api/spreadsheet/save'
   }
 },
 methods: {
   created: function() {
     var spreadsheet = this.$refs.spreadsheet;
     spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1');
     spreadsheet.numberFormat('$#,##0.00', 'F2:F31');
     spreadsheet.numberFormat('m/d/yyyy', 'E2:E30');
   },
   getSheets: function() {
     var spreadsheet = this.$refs.spreadsheet;
     // Logging the sheets property to the console.
     console.log(spreadsheet.ej2Instances.sheets);
   }
 }
}
</script> 

Refer to the working sample for additional details and implementation: https://stackblitz.com/edit/gj5hxf-3v3hjkfx?file=src%2FApp.vue

Output: