Change scope of ref with v-scope

Author: wusaby-rush

src/walk.ts

@@ -15,6 +15,7 @@ const modifierRE = /\.([\w-]+)/g
 export let inOnce = false
 
 export const walk = (node: Node, ctx: Context): ChildNode | null | void => {
+  const parentCtx = ctx
   const type = node.nodeType
   if (type === 1) {
     // Element
@@ -55,6 +56,9 @@ export const walk = (node: Node, ctx: Context): ChildNode | null | void => {
 
     // ref
     if ((exp = checkAttr(el, 'ref'))) {
+      if (ctx !== parentCtx) {
+      	applyDirective(el, ref, `"${exp}"`, parentCtx)
+      }
       applyDirective(el, ref, `"${exp}"`, ctx)
     }
 

tests/ref.html

@@ -7,7 +7,7 @@
   id="root"
   ref="root"
   v-scope="{ dynamicRef: 'x', show: true }"
-  v-effect="console.log({ x: $refs.x, y: $refs.y, input: $refs.input })"
+  v-effect="console.log({ x: $refs.x, y: $refs.y, input: $refs.input, modal: $refs.modal })"
 >
   <p>Accessing root el (with ref): id is {{ $refs.root.id }}</p>
   <p>Accessing root el (with $root): id is {{ $refs.root.id }}</p>
@@ -20,10 +20,10 @@
   </button>
   <button @click="show = !show">toggle</button>
 
-  <div v-scope>
+  <div id="modal" ref="modal" v-scope>
     <p ref="x">nested scope ref</p>
     <button
-      @click="console.log({ x: $refs.x, y: $refs.y, input: $refs.input })"
+      @click="console.log({ x: $refs.x, y: $refs.y, input: $refs.input, modal: $refs.modal })"
     >
       log nested scope refs
     </button>