how can i optimize this code to work well with 20000 data points that are able to be drilled into on click?

import { computed, watch } from 'vue';
import * as constants from "@/constants/index.js";
import { useStore } from 'vuex';
import utils from "@/utils/index.js";
import useTreenode from './useTreenode';


/**
 * Reference to the entire tree, mapped to highcharts readable data
 */
export default function useTreemap() {
    const store = useStore();
    const { treemapDataset, treetype } = store.state
    const treetypeFields = computed(() => store.getters.treetypeFields);
    const colorsMap = {};
    const root = computed(() => store.getters.root)
    const flattenedTree = computed(() => store.getters.flattenedTree);
    const { setRootTreenode, setCurrentTreenode } = useTreenode();

    function init() {
        createColorsMap();
        flattenTree(root.value)
    }

    watch(
        () => root.value,
        (newroot, prev) => {
            try {
                if (newroot) {
                    init()
                }
            }
            catch(e) {
                console.error(e);
                store.dispatch("stopLoading");
            }
        },
        {deep: false}
    )
    watch(
        () => store.state.treetype,
        (treetype, prev) => {
        }
    )

    function createColorsMap() {
        if (root.value && root.value.children) {
            let children = root.value.children;
            children.forEach((child, index) => {
                colorsMap[child.id] = utils.hslColor({index, length: children.length})
            })
            Highcharts.getOptions().colors = Object.values(colorsMap).map(color => color && color.hslToHex? color.hslToHex() : null)
        }
    }

    function setTreeType(value="org") {
        store.commit('setTreetype', value);
    }

    function flattenTree(node) {
        let flattened = []
        let highchartsRoot = traverseTree(node, null, flattened, 0, 0)
        highchartsRoot.children = flattened.filter(child => child.parent == node.id)
        
        store.commit('setFlattenedTree', flattened)
        setRootTreenode(highchartsRoot);
        setCurrentTreenode(highchartsRoot);
    }

    function traverseTree(node, parentId=null, nodes=[], depth=0, totalNodes=0, color=constants.DEFAULT_NODE_COLOR) {
        if (colorsMap[node.id]) color = colorsMap[node.id];

        if (node.children) {
            depth++;
            node.children.forEach(child => {                    
                let n = traverseTree(child, node.id, nodes, depth, 0, color=color)
                nodes.push(n)
                totalNodes += n.value
            })
            return createTreenode(node, parentId, depth, totalNodes, color)
        } else {
            return createTreenode(node, parentId, depth, 1, color)
        }
    }

    function createTreenode(node, parent, depth=0, total=1, color) {           
        return {
            id: node.id,
            parent, 
            depth,
            value: total,
            
            total,
            name: node.data[treetypeFields.value.name],
            color: Highcharts.getOptions().colors[color.index],
            data: Object.keys(node.data).reduce((acc, key) => {
                acc[key] = JSON.parse(JSON.stringify(node.data[key]))
                return acc;
            }, {})
        }
    }

    return { flattenedTree }
}