关于绑定style后改变样式内容的问题

我在页面上放了如下一个div,通过将zoom变量绑定到style中,来动态计算这个div的大小。
想到做的事情是,在一个方法中通过改变zoom变量的值来改变div的大小,并使用Div变更前后的尺寸进行其他计算。
我尝试在鼠标滚轮事件中,修改zoom变量的值时,div的大小似乎没能立即得到计算。请问想实现需求,应该怎么做?

html:
<div id="targetDiv" :style="{border:'1px black solid',width: 50*zoom + 'px',height: 50*zoom + 'px','text-align':'center'}" @mousewheel.prevent="wZoom"> </div>

script:
new Vue({
el: ‘#app’,
data: {
zoom: 10
},
methods: {
wZoom: function (event) {
let targetDivDom = document.getElementById(“targetDiv”);
// zoom值变更前div大小
console.log(“divSize :”, targetDivDom.style.width, targetDivDom.style.height);

            this.zoom = this.zoom + event.wheelDelta / 120;
            // zoom值变更后div大小
            // 此时似乎div的大小并没有改变,此处我需要使用的最新的div大小进行其他计算
            console.log("divSize :", targetDivDom.style.width, targetDivDom.style.height);
        }

    }

})