fix(template-ref): fix string template refs inside slots

packages/compiler-core/src/compile.ts

@@ -4,6 +4,7 @@ import { transform, NodeTransform, DirectiveTransform } from './transform'
 import { generate, CodegenResult } from './codegen'
 import { RootNode } from './ast'
 import { isString } from '@vue/shared'
+import { transformRef } from './transforms/transformRef'
 import { transformIf } from './transforms/vIf'
 import { transformFor } from './transforms/vFor'
 import { transformExpression } from './transforms/transformExpression'
@@ -27,6 +28,7 @@ export function getBaseTransformPreset(
 ): TransformPreset {
   return [
     [
+      transformRef,
       transformOnce,
       transformIf,
       transformFor,

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

@@ -0,0 +1,40 @@
+import { NodeTransform } from '../transform'
+import {
+  NodeTypes,
+  ElementTypes,
+  createSimpleExpression,
+  createCompoundExpression
+} from '../ast'
+import { findProp } from '../utils'
+
+// Convert ref="foo" to `:ref="[_ctx, 'foo']"` so that the ref contains the
+// correct owner instance even inside slots.
+export const transformRef: NodeTransform = node => {
+  if (
+    !(
+      node.type === NodeTypes.ELEMENT &&
+      (node.tagType === ElementTypes.ELEMENT ||
+        node.tagType === ElementTypes.COMPONENT)
+    )
+  ) {
+    return
+  }
+  const ref = findProp(node, 'ref')
+  if (!ref) return
+  const refKey =
+    ref.type === NodeTypes.ATTRIBUTE
+      ? ref.value
+        ? createSimpleExpression(ref.value.content, true, ref.value.loc)
+        : null
+      : ref.exp
+  if (refKey) {
+    node.props[node.props.indexOf(ref)] = {
+      type: NodeTypes.DIRECTIVE,
+      name: `bind`,
+      arg: createSimpleExpression(`ref`, true, ref.loc),
+      exp: createCompoundExpression([`[_ctx, `, refKey, `]`]),
+      modifiers: [],
+      loc: ref.loc
+    }
+  }
+}