EjsPivotTable pdfExportProperties not working

EjsPivotTable

<template>
    <div class="row">
        <ejs-pivotview
                id="pivotview"
                :dataSourceSettings="dataSourceSettings"
                :showFieldList="fieldList"
                :showGroupingBar="groupingBar"
                :allowCalculatedField="calculatedField"
                :allowExcelExport="allowExcelExport"
                :allowPdfExport="allowPdfExport"
                :showToolbar="true"
                :toolbar="toolbar"
                :displayOption="displayOption"
                :chartSettings="chartSettings"
                :enableVirtualization="enableVirtualization"
                :allowConditionalFormatting="allowConditionalFormatting"

        ></ejs-pivotview>
    </div>
</template>

<script>
    import Vue from "vue";
    import {PdfExportProperties} from '@syncfusion/ej2-vue-grids';
    import {
        PivotViewPlugin,
        GroupingBar,
        FieldList,
        CalculatedField,
        Toolbar,
        PivotChart,
        VirtualScroll,
        ConditionalFormatting,
        PDFExport,
        ExcelExport,
    } from "@syncfusion/ej2-vue-pivotview";
    import {ButtonPlugin, ChangeEventArgs} from "@syncfusion/ej2-vue-buttons";

    Vue.use(PivotViewPlugin);
    Vue.use(ButtonPlugin);
    //docs: https://ej2.syncfusion.com/vue/documentation/pivotview/getting-started/
    export default {
        name: "EjsPivotTable",
        props: {
            data: {required: true, type: Array},
            rows: {type: Array, default: () => []},
            columns: {type: Array, default: () => []},
            values: {type: Array, default: () => []},
            filters: {type: Array, default: () => []},
            expandAll: {type: Boolean, default: false},
            calculatedFieldSettings: {type: Array, default: () => []},
            drilledMembers: {type: Array, default: () => []},
            showGroupingBar: {type: Boolean, default: true},
            allowCalculatedField: {type: Boolean, default: true},
            showFieldList: {type: Boolean, default: true}
        },
        mounted() {
            this.grid = document.getElementById("pivotview").ej2_instances[0];
        },
        data() {
            return {
                grid: undefined,
                dataSourceSettings: {
                    dataSource: this.data,
                    rows: this.rows,
                    columns: this.columns,
                    values: this.values,
                    filters: this.filters,
                    expandAll: this.expandAll,
                    formatSettings: this.formatSettings,
                    drilledMembers: this.drilledMembers,
                    calculatedFieldSettings: this.calculatedFieldSettings
                },
                width: "100%",
                groupingBar: this.showGroupingBar,
                calculatedField: this.allowCalculatedField,
                fieldList: this.showFieldList,
                allowExcelExport: true,
                allowPdfExport: true,
                displayOption: {view: "Both"},
                chartSettings: {chartSeries: {type: "Column"}},
                enableVirtualization: true,
                allowConditionalFormatting: true,
                toolbar: [
                    "Grid",
                    "Chart",
                    "Export",
                    "SubTotal",
                    "GrandTotal",
                    "FieldList"
                ]
            };
        },
        watch: {
            data() {
                //   pivotGridObj.engineModule.fieldList = {};
                this.grid.dataSourceSettings.dataSource = this.data;
            }
        },
        provide: {
            pivotview: [
                GroupingBar,
                FieldList,
                CalculatedField,
                Toolbar,
                PivotChart,
                VirtualScroll,
                ConditionalFormatting,
                PDFExport,
                ExcelExport,
            ]
        },
        methods: {
            exportToPdf(e) {
                e.preventDefault();

                var pdfExportProperties = {
                    header: {
                        fromTop: 0,
                        height: 130,
                        contents: [
                            {
                                type: 'Text',
                                value: "Pivot Grid",
                                position: {x: 0, y: 50},
                                style: {textBrushColor: '#000000', fontSize: 13, dashStyle: 'Solid', hAlign: 'Center'}
                            }
                        ]
                    },
                    footer: {
                        fromBottom: 160,
                        height: 150,
                        contents: [
                            {
                                type: 'PageNumber',
                                pageNumberType: 'Arabic',
                                format: 'Page {$current} of {$total}',
                                position: {x: 0, y: 25},
                                style: {textBrushColor: '#02007a', fontSize: 15}
                            }
                        ]
                    }
                };

                this.grid.pdfExport(pdfExportProperties);
            },

            exportToExcel(e) {
                e.preventDefault();
                this.grid.excelExport();
            },

            exportToCsv(e) {
                e.preventDefault();

                this.grid.csvExport();
            }
        }
    };
</script>
<style scoped>
</style>