How to dynamically resize a block?

Question

Vue.js

I'm trying to implement block resizing when scrolling the mouse wheel. When inspecting the element, I see that the transform property changes, but visually the block doesn't change.
https://jsfiddle.net/eo9L1452/

<div 
        class="workspase" 
        id="workspase" 
        @mousewheel.passive="handleZoom($event)"
>
            <div 
                style="width: 100px; height: 100px; background: red;" 
                :transform="computedMatrix"
            ></div>
</div>

export default {
    data () {
        return {
            matrix: { a: 1, b: 0, c: 0, d: 1, x: 0, y: 0 },
            zoom: 1,
        }
    },
    computed: {
        computedMatrix () {
            const { a, b, c, d, x, y } = this.matrix
            return `matrix(${this.zoom}, ${b}, ${c}, ${this.zoom}, ${x}, ${y})`
        },
    },
    methods: {
        handleZoom ({ deltaY }) {
            this.zoom = deltaY < 0 ? (this.zoom * 10 + 1) / 10 : (this.zoom * 10 - 1) / 10
        },
        
    },
}

.workspase {
        width: 800px;
        height: 500px;
        border: 2px solid black;
    }

Answer 1

There is no such attribute - transform. This should be the style property:
:style="{ transform: computedMatrix }"