Javascript Vue在子组件上的父组件中执行异步更新

我有一个使用各种图表子组件显示数据的组件，为此，我想在父组件中对图表数据进行客户端过滤。我有另一个子组件处理过滤，它在应用过滤器时向父组件发送事件，父组件将重新计算数据并发送到图表子组件

当前，当应用了过滤器时，重新计算会花费很长时间，并且我正试图消除UI中的冻结

这是它当前外观的伪代码示例：

export default {
    name: "reportingView",
    components: {
        chartA,
        chartB,
        filtering
    },
    data() {
        return {
            chartAData, //used as prop to chartA
            chartBData //used as prop to chartA
        }
    },
    methods: {
        filterChangedEvent(e) {
            this.calculateChartData()
        },
        async calculateChartData() {
            //Calculate data and update chartAData and chartBData
            console.log("calculation done");
        }
    },
    updated() {
        console.log("parent updated");
    }
}

export default {
    name: "filtering",
    data() {
        return {
            appliedFilters
        }
    }
    methods: {
        filterChanged() {
            this.this.$emit("filterChanged", this.appliedFilters);
        }
    }
    updated() {
        console.log("child updated");
    }
}

我希望过滤器组件在完成某项工作后立即重新呈现，然后将更改发送到父组件，然后父组件应重新异步计算数据，然后在完成后重新呈现UI

我希望日志是： “儿童升级” “计算完成” “父级已更新”

但是我越来越 “计算完成” “已更新子项” “父级已更新”，在计算过程中用户界面被冻结

---

当子级发出事件时，如何在父级中实现异步更新？

如果希望计算属性导致更改时重新渲染，请使用计算属性：这不会解决问题，如果计算属性需要2秒的时间来计算，则仍然会出现UI冻结。