docs: use useTemplateRef and #components

docs/content/2.references/1.monaco-editor.md

@@ -62,15 +62,15 @@ interface Emits {
 Emitted with an instance of [`IStandaloneCodeEditor`](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneCodeEditor.html) when the editor is loaded
 
 ## `Ref` of `<MonacoEditor>`
-You can access to the editor instanc by using `ref` and `$editor`.
+You can access to the editor instance by using `useTemplateRef`(or `ref`) and `$editor`.
 ```vue
 <template>
   <MonacoEditor ref="editorRef" />
 </template>
 
 <script lang="ts" setup>
-import { MonacoEditor } from '#build/components'
-const editorRef = ref<InstanceType<typeof MonacoEditor>>()
+import { MonacoEditor } from '#components'
+const editorRef = useTemplateRef<InstanceType<typeof MonacoEditor>>('editorRef')
 
 // For example, add greeting action to editor...
 editorRef.value?.$editor.addAction({

docs/content/2.references/2.monaco-diff-editor.md

@@ -66,15 +66,15 @@ interface Emits {
 Emitted with an instance of [`IStandaloneDiffEditor`](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneDiffEditor.html) when the editor is loaded
 
 ## `Ref` of `<MonacoDiffEditor>`
-You can access to the editor instanc by using `ref` and `$editor`.
+You can access to the editor instance by using `useTemplateRef`(or `ref`) and `$editor`.
 ```vue
 <template>
   <MonacoDiffEditor ref="editorRef" />
 </template>
 
 <script lang="ts" setup>
-import { MonacoEditor } from '#build/components'
-const editorRef = ref<InstanceType<typeof MonacoDiffEditor>>()
+import { MonacoEditor } from '#components'
+const editorRef = useTemplateRef<InstanceType<typeof MonacoDiffEditor>>('editorRef')
 
 // For example, add greeting action to editor...
 editorRef.value?.$editor.addAction({

docs/content/2.references/3.use-monaco.md

@@ -17,6 +17,6 @@ import type { ISelection } from 'monaco-editor'
 ## Example
 ```ts
 const monaco = useMonaco()!
-const editorEl = ref<HTMLDivElement>()
+const editorEl = useTemplateRef<HTMLDivElement>('editor')
 monaco.editor.create(editorEl.value, { language: 'typescript' })
 ```

docs/content/ja/2.references/1.monaco-editor.md

@@ -62,15 +62,15 @@ interface Emits {
 エディタの読み込みが完了したときに、[`IStandaloneCodeEditor`](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneCodeEditor.html)を引数として呼び出されます。
 
 ## `<MonacoEditor>`の`Ref`の使用
-`ref` と `$editor` を用いることで、エディタのインスタンスに直接アクセスできます。
+`useTemplateRef`(または`ref`) と `$editor` を用いることで、エディタのインスタンスに直接アクセスできます。
 ```vue
 <template>
   <MonacoEditor ref="editorRef" />
 </template>
 
 <script lang="ts" setup>
-import { MonacoEditor } from '#build/components'
-const editorRef = ref<InstanceType<typeof MonacoEditor>>()
+import { MonacoEditor } from '#components'
+const editorRef = useTemplateRef<InstanceType<typeof MonacoEditor>>('editorRef')
 
 // あいさつアクションを追加するには...
 editorRef.value?.$editor.addAction({

docs/content/ja/2.references/2.monaco-diff-editor.md

@@ -65,15 +65,15 @@ interface Emits {
 エディタの読み込みが完了したときに、[`IStandaloneDiffEditor`](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneDiffEditor.html)を引数として呼び出されます。
 
 ## `<MonacoDiffEditor>`の`Ref`の使用
-`ref` と `$editor` を用いることで、エディタのインスタンスに直接アクセスできます。
+`useTemplateRef`(または`ref`) と `$editor` を用いることで、エディタのインスタンスに直接アクセスできます。
 ```vue
 <template>
   <MonacoDiffEditor ref="editorRef" />
 </template>
 
 <script lang="ts" setup>
-import { MonacoEditor } from '#build/components'
-const editorRef = ref<InstanceType<typeof MonacoDiffEditor>>()
+import { MonacoEditor } from '#components'
+const editorRef = useTemplateRef<InstanceType<typeof MonacoDiffEditor>>('editorRef')
 
 // あいさつアクションを追加するには...
 editorRef.value?.$editor.addAction({

docs/content/ja/2.references/3.use-monaco.md

@@ -13,6 +13,6 @@ import type { ISelection } from 'monaco-editor'
 ## 例
 ```ts
 const monaco = useMonaco()!
-const editorEl = ref<HTMLDivElement>()
+const editorEl = useTemplateRef<HTMLDivElement>('editor')
 monaco.editor.create(editorEl.value, { language: 'typescript' })
 ```