diff --git a/packages/uni-mp-compiler/__tests__/ref.spec.ts b/packages/uni-mp-compiler/__tests__/ref.spec.ts
index 5680a258e18d5193ebd4992ce5b54c76e854fd3c..55d1432d9f0556aa7a89d9ab134099d590bab868 100644
--- a/packages/uni-mp-compiler/__tests__/ref.spec.ts
+++ b/packages/uni-mp-compiler/__tests__/ref.spec.ts
@@ -7,6 +7,13 @@ describe('compiler: transform ref', () => {
       `<custom class="vue-ref"/>`,
       `(_ctx, _cache) => {
   return {}
+}`
+    )
+    assert(
+      `<custom/><custom/>`,
+      `<custom class="vue-ref"/><custom class="vue-ref"/>`,
+      `(_ctx, _cache) => {
+  return {}
 }`
     )
   })
@@ -16,6 +23,24 @@ describe('compiler: transform ref', () => {
       `<custom wx:for="{{a}}" wx:for-item="item" class="vue-ref-in-for"/>`,
       `(_ctx, _cache) => {
   return { a: _vFor(_ctx.items, item => { return {}; }) }
+}`
+    )
+  })
+  test('static ref', () => {
+    assert(
+      `<custom ref="custom"/>`,
+      `<custom class="vue-ref" data-ref="custom"/>`,
+      `(_ctx, _cache) => {
+  return {}
+}`
+    )
+  })
+  test('dynamic ref', () => {
+    assert(
+      `<custom :ref="custom"/>`,
+      `<custom class="vue-ref" data-ref="{{a}}"/>`,
+      `(_ctx, _cache) => {
+  return { a: _ctx.custom }
 }`
     )
   })
diff --git a/packages/uni-mp-compiler/__tests__/test.spec.ts b/packages/uni-mp-compiler/__tests__/test.spec.ts
index 41868a0448c0f88d1f27ac12583abaae7cf4ec58..d52b3c899c81ff1c40d34fb7ce70c7e318782f50 100644
--- a/packages/uni-mp-compiler/__tests__/test.spec.ts
+++ b/packages/uni-mp-compiler/__tests__/test.spec.ts
@@ -37,10 +37,10 @@ function assert(
 describe('compiler', () => {
   test('scope', () => {
     assert(
-      `<template v-if="ok"><view/>hello<view/></template>`,
+      `<view :style="{ color: \`\${green}px\` }"/>`,
       `<view style="{{'color:' + a}}"/>`,
       `(_ctx, _cache) => {
-  return { a: _ctx.ok, ...(_ctx.ok ? {} : {}) }
+  return { a: \`\${_ctx.green}px\` }
 }`
     )
   })
diff --git a/packages/uni-mp-compiler/src/transforms/transformElement.ts b/packages/uni-mp-compiler/src/transforms/transformElement.ts
index fa7375ed519fda8d9271b46e006c9f7cb0bb398a..1fed011b6850de1b0a0e4169980af793584aeecc 100644
--- a/packages/uni-mp-compiler/src/transforms/transformElement.ts
+++ b/packages/uni-mp-compiler/src/transforms/transformElement.ts
@@ -95,7 +95,7 @@ function addVueRef(node: ElementNode, context: TransformContext) {
 function processComponent(node: ElementNode, context: TransformContext) {
   const { tag } = node
   if (context.bindingComponents[tag]) {
-    return
+    return addVueRef(node, context)
   }
 
   // 1. dynamic component
@@ -217,7 +217,12 @@ function processProps(node: ElementNode, context: TransformContext) {
 
   for (let i = 0; i < props.length; i++) {
     const prop = props[i]
-    if (prop.type === NodeTypes.DIRECTIVE) {
+    if (prop.type === NodeTypes.ATTRIBUTE) {
+      // <custom ref="c"/> => <custom data-ref="c"/>
+      if (prop.name === 'ref') {
+        prop.name = 'data-ref'
+      }
+    } else {
       // directives
       const { name, arg, loc } = prop
       const isVBind = name === 'bind'
@@ -276,6 +281,16 @@ function processProps(node: ElementNode, context: TransformContext) {
         }
       }
 
+      if (isVBind) {
+        // <custom :ref="c"/> => <custom :data-ref="c" />
+        if (
+          arg?.type === NodeTypes.SIMPLE_EXPRESSION &&
+          arg.content === 'ref'
+        ) {
+          arg.content = 'data-ref'
+        }
+      }
+
       const directiveTransform = context.directiveTransforms[name]
       if (directiveTransform) {
         prop.exp = directiveTransform(prop, node, context).props[0]
diff --git a/packages/uni-mp-compiler/src/transforms/vFor.ts b/packages/uni-mp-compiler/src/transforms/vFor.ts
index ea0f48d464bc81f625e7898ef108fda291516225..81d5dc967308a370cfb4a99f9471443cab915710 100644
--- a/packages/uni-mp-compiler/src/transforms/vFor.ts
+++ b/packages/uni-mp-compiler/src/transforms/vFor.ts
@@ -131,6 +131,7 @@ export const transformFor = createStructuralDirectiveTransform(
     scopes.vFor++
 
     return () => {
+      scopes.vFor--
       if (isTemplateNode(node)) {
         node.children.some((c) => {
           if (c.type === NodeTypes.ELEMENT && !isForElementNode(c)) {