fix(reactivity-transform): fix props access codegen for non-identifier prop names (#5436)

fix #5425

packages/compiler-core/src/transforms/transformExpression.ts

@@ -24,7 +24,13 @@ import {
   walkIdentifiers
 } from '../babelUtils'
 import { advancePositionWithClone, isSimpleIdentifier } from '../utils'
-import { isGloballyWhitelisted, makeMap, hasOwn, isString } from '@vue/shared'
+import {
+  isGloballyWhitelisted,
+  makeMap,
+  hasOwn,
+  isString,
+  genPropsAccessExp
+} from '@vue/shared'
 import { createCompilerError, ErrorCodes } from '../errors'
 import {
   Node,
@@ -185,17 +191,17 @@ export function processExpression(
       } else if (type === BindingTypes.PROPS) {
         // use __props which is generated by compileScript so in ts mode
         // it gets correct type
-        return `__props.${raw}`
+        return genPropsAccessExp(raw)
       } else if (type === BindingTypes.PROPS_ALIASED) {
         // prop with a different local alias (from defineProps() destructure)
-        return `__props.${bindingMetadata.__propsAliases![raw]}`
+        return genPropsAccessExp(bindingMetadata.__propsAliases![raw])
       }
     } else {
       if (type && type.startsWith('setup')) {
         // setup bindings in non-inline mode
         return `$setup.${raw}`
       } else if (type === BindingTypes.PROPS_ALIASED) {
-        return `$props.${bindingMetadata.__propsAliases![raw]}`
+        return `$props['${bindingMetadata.__propsAliases![raw]}']`
       } else if (type) {
         return `$${type}.${raw}`
       }