Add $root refer to component root element

Some times like in dialogs we need access to root component from child nodes, also it is a way to access root element from `v-scope`. the next snippet from another PR to expose `$el` to scope, but this PR can solve the same problem also

```html
<textarea
  v-scope="{width: $root.offsetWidth, height: $root.offsetHeight}"
  @click="width = $el.offsetWidth; height = $el.offsetHeight;"
>
{{ width }} &times; {{ height }}
</textarea>
```

Author: wusaby-rush

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

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)

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>