diff --git a/README.md b/README.md
index 0dd84fa..0661cd7 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,14 @@
   {{ count }}
   <button @click="count++">inc</button>
 </div>
+
+<!-- another example -->
+<textarea
+  v-scope="{width: $root.offsetWidth, height: $root.offsetHeight}"
+  @click="width = $el.offsetWidth; height = $el.offsetHeight;"
+>
+{{ width }} &times; {{ height }}
+</textarea>
 ```
 
 - Use `v-scope` to mark regions on the page that should be controlled by `petite-vue`.
@@ -346,10 +354,11 @@ Check out the [examples directory](https://github.com/vuejs/petite-vue/tree/main
 - `v-scope`
 - `v-effect`
 - `@vue:mounted` & `@vue:unmounted` events
+- `$root` refer to component root element
 
 ### Has Different Behavior
 
-- In expressions, `$el` points to the current element the directive is bound to (instead of component root element)
+- In expressions, `$el` points to the current element the directive is bound to (instead of component root element which accessed by `$root`)
 - `createApp()` accepts global state instead of a component
 - Components are simplified into object-returning functions
 - Custom directives have a different interface
diff --git a/src/walk.ts b/src/walk.ts
index f996461..8eb8467 100644
--- a/src/walk.ts
+++ b/src/walk.ts
@@ -40,6 +40,7 @@ export const walk = (node: Node, ctx: Context): ChildNode | null | void => {
     // v-scope
     if ((exp = checkAttr(el, 'v-scope')) || exp === '') {
       const scope = exp ? evaluate(ctx.scope, exp) : {}
+      scope.$root = el
       ctx = createScopedContext(ctx, scope)
       if (scope.$template) {
         resolveTemplate(el, scope.$template)
diff --git a/tests/ref.html b/tests/ref.html
index ccb71fa..989587d 100644
--- a/tests/ref.html
+++ b/tests/ref.html
@@ -9,7 +9,8 @@
   v-scope="{ dynamicRef: 'x', show: true }"
   v-effect="console.log({ x: $refs.x, y: $refs.y, input: $refs.input })"
 >
-  <p>Accessing root el: id is {{ $refs.root.id }}</p>
+  <p>Accessing root el (with ref): id is {{ $refs.root.id }}</p>
+  <p>Accessing root el (with $root): id is {{ $refs.root.id }}</p>
 
   <input ref="input" />
   <span v-if="show" :ref="dynamicRef">Span with dynamic ref</span>