I’m using WebDataRocks in my Vue 3 project to handle large datasets. My implementation works fine with smaller datasets, but when the data size increases, the setReport method blocks the main thread, causing performance issues. Here is a simplified version of my code:

<template>
  <div>
    <webdatarocks ref="pivot"></webdatarocks>
  </div>
</template>

<script>
import WebDataRocks from "webdatarocks";

export default {
  props: {
    dataSource: {
      type: Array,
      required: true,
    },
  },
  mounted() {
    this.$refs.pivot.webdatarocks.on("reportcomplete", () => {
      this.$refs.pivot.webdatarocks.off("reportcomplete");
      this.$refs.pivot.webdatarocks.setReport(this.report);
    });
  },
  watch: {
    dataSource: {
      handler(newValue) {
        this.setReport();
      },
      deep: true,
    },
  },
  methods: {
    setReport() {
      const report = {
        dataSource: {
          data: this.dataSource,
        },
      };
      this.$refs.pivot.webdatarocks.setReport(report);
    },
  },
};
</script>

Questions:
How can I prevent setReport from blocking the main thread when dealing with large datasets?
Are there any recommended practices or alternative approaches to handle large datasets efficiently in WebDataRocks?
Additional Information:
Vue.js version: 3.x
WebDataRocks version: last version
Operating System: Windows 10
Browser: last version

I tried the following approaches to prevent setReport from blocking the main thread:

import { debounce } from 'lodash';

methods: {
  setReport: debounce(function () {
    const report = {
      dataSource: {
        data: this.dataSource,
      },
    };
    this.$refs.pivot.webdatarocks.setReport(report);
  }, 300),
},