Vue Pivot Table localization

<script setup>
import { useTemplateRef } from "vue";
import Pivot from "vue-flexmonster/vue3";
import "flexmonster/flexmonster.css";

const pivotRef = useTemplateRef("pivot");
const report = {
  dataSource: {
    type: "csv",
    filename: "https://cdn.flexmonster.com/data/data-en.csv"
  },
  slice: {
    rows: [
      {
        uniqueName: "Country"
      },
      {
        uniqueName: "Category"
      }
    ],
    columns: [
      {
        uniqueName: "Color"
      },
      {
        uniqueName: "[Measures]"
      }
    ],
    measures: [
      {
        uniqueName: "Price",
        aggregation: "sum",
        format: "currency"
      },
      {
        uniqueName: "Quantity",
        aggregation: "sum"
      }
    ]
  },
  options: {
    useCaptionsInCalculatedValueEditor: true
  },
  formats: [
    {
      name: "currency",
      currencySymbol: "$",
      thousandsSeparator: ",",
      decimalSeparator: ".",
      decimalPlaces: 2
    }
  ]
};
const pdfFonts = {
  en: "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
  fr: "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
  it: "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
  es: "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
  pt: "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
  zh: "https://cdn.flexmonster.com/fonts/NotoSansCJKsc-Regular.ttf",
  uk: "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf"
};

let currentLang = "en";

function setLocalization(lang) {
  currentLang = lang;
  const currentReport = pivotRef.value.flexmonster.getReport();
  currentReport.dataSource = {
    type: "json",
    filename: `https://cdn.flexmonster.com/data/localized/data-${lang}.json`,
    mapping: `https://cdn.flexmonster.com/data/localized/data-${lang}-mapping.json`
  };
  currentReport.localization = `https://cdn.flexmonster.com/loc/${lang}.json`;
  pivotRef.value.flexmonster.setReport(currentReport);
}

function customizeToolbar(toolbar) {
  toolbar.exportHandler = (type) => {
    if (type == "pdf") {
      pivotRef.value.flexmonster.exportTo(type, {
        fontUrl: pdfFonts[currentLang]
      });
    } else {
      pivotRef.value.flexmonster.exportTo(type);
    }
  };
  toolbar.showShareReportTab = true;
}
</script>

<template>
  <button @click="setLocalization('en')">EN</button>
  <button @click="setLocalization('fr')">FR</button>
  <button @click="setLocalization('it')">IT</button>
  <button @click="setLocalization('es')">ES</button>
  <button @click="setLocalization('pt')">PT</button>
  <button @click="setLocalization('zh')">ZH</button>
  <button @click="setLocalization('uk')">UK</button>
  <Pivot
    ref="pivot"
    height="550"
    toolbar
    :report="report"
    :beforetoolbarcreated="customizeToolbar"
    :shareReportConnection="{
      url: 'https://olap.flexmonster.com:9500'
    }"
  />
</template>