fix(compiler): avoid namespace collisions when transforming template refs in inline mode (#6975)

fix #6964

packages/compiler-core/__tests__/transforms/transformElement.spec.ts

@@ -1063,6 +1063,32 @@ describe('compiler: element transform', () => {
       })
     })
 
+    test('script setup inline mode template ref (binding does not exist but props with the same name exist)', () => {
+      const { node } = parseWithElementTransform(`<input ref="msg"/>`, {
+        inline: true,
+        bindingMetadata: {
+          msg: BindingTypes.PROPS,
+          ref: BindingTypes.SETUP_CONST
+        }
+      })
+      expect(node.props).toMatchObject({
+        type: NodeTypes.JS_OBJECT_EXPRESSION,
+        properties: [
+          {
+            type: NodeTypes.JS_PROPERTY,
+            key: {
+              content: 'ref',
+              isStatic: true
+            },
+            value: {
+              content: 'msg',
+              isStatic: true
+            }
+          }
+        ]
+      })
+    })
+
     test('HYDRATE_EVENTS', () => {
       // ignore click events (has dedicated fast path)
       const { node } = parseWithElementTransform(`<div @click="foo" />`, {

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

@@ -497,19 +497,21 @@ export function buildProps(
         // in inline mode there is no setupState object, so we can't use string
         // keys to set the ref. Instead, we need to transform it to pass the
         // actual ref instead.
-        if (
+        if (!__BROWSER__ && value && context.inline) {
-          !__BROWSER__ &&
+          const binding = context.bindingMetadata[value.content]
-          value &&
+          if (
-          context.inline &&
+            binding === BindingTypes.SETUP_LET ||
-          context.bindingMetadata[value.content]
+            binding === BindingTypes.SETUP_REF ||
-        ) {
+            binding === BindingTypes.SETUP_MAYBE_REF
-          isStatic = false
+          ) {
-          properties.push(
+            isStatic = false
-            createObjectProperty(
+            properties.push(
-              createSimpleExpression('ref_key', true),
+              createObjectProperty(
-              createSimpleExpression(value.content, true, value.loc)
+                createSimpleExpression('ref_key', true),
+                createSimpleExpression(value.content, true, value.loc)
+              )
             )
-          )
+          }
         }
       }
       // skip is on <component>, or is="vue:xxx"