Use the nextTick callback to get the clientHeight of the box, but the height is not the same as the actual height. What went wrong?

in a vue project, I need to implement a waterfall flow with two vertical columns. What I take is to put the left and right boxes in the layout, and put the data obtained from the interface one by one according to the height of the two boxes. Whoever has a small ClientHeight will be put into the one, but in the process of window scrolling, the ClientHeight of the left and right boxes is smaller than the actual one, resulting in the back. An error occurred in the location when the data entered

let vm = new Vue({
el: "-sharpwaterfall",
data: {
"recommendList": [],
"pageRecommends": [],
"recommendTotal": 0,
"curPage": 1,
"ltList": [],
"rtList": [],
"leftHeight": 0,
"rightHeight": 0
},
methods: {
getRecommoned: function (page,size = 10) {
    $.get("...", {
        "id": this.weng.id,
        "page": page,
        "size": size
    }, (res) => {
        this.recommendList = [...this.recommendList, ...res.body.list];
        this.pageRecommends = res.body.list;
        this.recommendTotal = res.body.total;
        vm.$nextTick(() => {
            vm.updateWaterfall();
        });
    })
},
updateWaterfall () {
    this.leftHeight = this.$refs.recslt.clientHeight;
    this.rightHeight = this.$refs.recsrt.clientHeight;
    let item = vm.pageRecommends.shift();
    if (item == null) {
        return;
    }
    if (this.leftHeight <= this.rightHeight) {
        vm.ltList.push(item);
    } else {
        vm.rtList.push(item);
    }
    this.$nextTick(() => {
        vm.updateWaterfall();
    })
}

},
created() {
this.getRecommoned(this.curPage);
window.onscroll = () => {
    if (this.ltList.length + this.rtList.length >= this.recommendTotal) {
        return;
    }
    let scrollTop = getScrollTop();
    let windowHeight = getClient().height;
    let scrollHeight = getScrollHeight();
    if (scrollTop + windowHeight == scrollHeight) {
        this.curPage PP;
        this.getRecommoned(this.curPage);
    }
    };
}
});
function getClient() {
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}
}
function getScrollTop() {
return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
}
function getScrollHeight() {
return document.documentElement.scrollHeight || document.body.scrollHeight;
}