`@api` decorated property is not reactive with private class properties

[ekim088]

Description

I'm using a getter/setter to perform side effects whenever a @api property is updated, and tracking the value with a local property. However, I noticed when using a private property (prefixed with #) to track the value, the decorated property is no longer reactive and the rendered output will not update until a separate update occurs. Using a non-private property to track the value also works as expected.

Steps to Reproduce

https://stackblitz.com/edit/salesforce-lwc-qhbdic?file=src%2Fmodules%2Fx%2Fcounter%2Fcounter.js

Expected Results

Updates to a private property from a @api decorated setter should be reactive and reflected in the rendered output.

Actual Results

The rendered output is not updated when a private property updates.

Browsers Affected

Version

• LWC: x.x.x

Possible Solution

Additional context/Screenshots Add any other context about the problem here. If applicable, add screenshots to help explain.

[nolanlawson]

This seems to be an issue with either @lwc/babel-plugin-components and/or our Babel class property transformations. I can see in the compiled JS that we are compiling #localCounter into a set of Babel polyfills, and that these do not seem to be correctly passed in to the registerDecorators call created by @lwc/babel-plugin-components:

var _localCounter;
function _classPrivateFieldLooseBase(receiver, privateKey) {
    // ...
}
// ...
var _xCounter = registerComponent(registerDecorators((_localCounter = /*#__PURE__*/
_classPrivateFieldLooseKey("localCounter"), /* ... */

Fixing this may rely on fixing #3537 first.