getComputedStyle and getBoundingClientRect give different width results when the element is scaled

After applying scale on an element, the width of the child elements calculated by getComputedStyle and getBoundingClientRect are different, why does this happen and which value is correct?

Here is a minimal implementation:

https://codepen.io/lai9fox/pen/wvVMyOq

const child = document.getElementById("child");
const getComputedStyleWidth = getComputedStyle(child).width;
const getBoundingClientRectWidth = child.getBoundingClientRect().width;

const span = document.createElement("span");
span.innerText = `
  width for getComputedStyle: ${getComputedStyleWidth}
  width for getBoundingClientRect: ${getBoundingClientRectWidth}
  `;
document.body.appendChild(span);

#parent {
  width: 500px;
  transform: scale(2);
  transform-origin: 0 0;
}

#child {
  background: yellow;
}

<div id="parent">
  <div>
    <div id="child">
      child
    </div>
  </div>
</div>