I'm having an issue with expanding side panel width in JavaScript:

I need to resize it on mousemove event but visual performance of changing width (like el.style.width = value) is far more better than changing custom property (like style.setProperty('--side-panel-width, value)) - Actually, the second one is freezing :(

However, I want to change Custom Property, because 2 other panels positioning are depending on this Custom Property value:

.other-panel {
  left: calc(var(--side-panel-width) + var(--offset));
}

My mousemove event handler code (simplified):

    onMouseMove(e) {
      requestAnimationFrame(() =>
        const parent = this.$refs.resize.parentNode;
        const dx = this.size - e.x;
        this.size = e.x;

        const value = (parseInt(getComputedStyle(parent, '').width) + dx);

        parent.style.width = value + 'px'; // CHANGE WIDTH DIRECTLY
        // this.app.style.setProperty('--side-panel-width', value + 'px'); // OR CHANGE CUSTOM PROPERTY
         )
       }

Please, can you explain why is this performance issue happening and is there a way to solve it while not changing width directly?

UPD:

• I simplified my code for event handler in order to make it more essential
• I applied will-change: width; CSS property to .side-panel too