docs: add scoping for custom directive (#1867)

docs/guide/advanced/directive.md

@@ -79,7 +79,7 @@ const i18n = createI18n({
 
 const app = createApp({
   data() {
-    return { 
+    return {
       byePath: 'message.bye',
       appleCount: 7,
     }
@@ -112,6 +112,16 @@ Outputs:
 </div>
 ```
 
+## scoping
+
+As mentioned in [the scope section](../essentials/scope.md), vue-i18n has a global scope and a local scope.
+
+The scope under which `v-t` is also affected by scope when it works.
+
+- local scope: using the i18n option in Legacy API style or using `useScope: ‘local'` in `useI18n`.
+- global scope: all cases other than the above.
+
+
 ## `$t` vs `v-t`
 
 ### `$t`

packages/vue-i18n-core/test/directive.test.ts

@@ -165,6 +165,36 @@ test('legacy mode', async () => {
   expect(wrapper.html()).toEqual('<p>hello!</p>')
 })
 
+test('fallback to global scope', async () => {
+  const i18n = createI18n({
+    locale: 'en',
+    messages: {
+      en: {
+        hello: 'hello!'
+      }
+    }
+  })
+
+  const Child = defineComponent({
+    setup() {
+      // <p v-t="'hello'"></p>
+      const t = resolveDirective('t')
+      return () => {
+        return withDirectives(h('p'), [[t!, 'hello']])
+      }
+    }
+  })
+
+  const App = defineComponent({
+    setup() {
+      return () => h('div', [h(Child)])
+    }
+  })
+  const wrapper = await mount(App, i18n)
+
+  expect(wrapper.html()).toEqual('<div><p>hello!</p></div>')
+})
+
 test('using in template', async () => {
   const i18n = createI18n({
     locale: 'en',