docs: refine WebGPU section in TresCanvas documentation

- Updated the WebGPU section to clarify the introduction of the `renderer` prop for creating a WebGPU renderer instance.
- Improved example code by moving the `<template>` block to the correct position for better readability and understanding.
- Added inline comments to enhance clarity regarding the context and size watching functionality.

docs/api/tres-canvas.md

@@ -126,7 +126,7 @@ watch(() => ctxRef.value?.context, (ctx) => {
 | context | see [useTresContext](composables#usetrescontext) |
 | dispose | dispose the renderer |
 
-## WebGPU 
+## WebGPU
 
 WebGPU support was introduced in ThreeJS version `0.160.0`. While is still heavily experimental and not fully compatible with all ThreeJS features, we have enable a prop `renderer` that streamlines a function that returns a promise with a WebGPU renderer instance.
 
@@ -138,12 +138,6 @@ When using a custom renderer (especially WebGPU), please note that:
 :::
 
 ```vue
-<template>
-  <TresCanvas :renderer="createWebGPURenderer">
-    <!-- Your scene goes here -->
-  </TresCanvas>
-</template>
-
 <script setup>
 import { WebGPURenderer } from 'three/webgpu'
 
@@ -157,6 +151,12 @@ const createWebGPURenderer = async (ctx) => {
   return renderer
 }
 </script>
+
+<template>
+  <TresCanvas :renderer="createWebGPURenderer">
+    <!-- Your scene goes here -->
+  </TresCanvas>
+</template>
 ```
 
 The `createWebGPURenderer` will return the context so you have access to the canvas, camera, scene, sizes etc.
@@ -169,7 +169,7 @@ const createWebGPURenderer = async (ctx) => {
   })
   await renderer.init()
 
-   // Watch size changes
+  // Watch size changes
   watch([ctx.sizes.width, ctx.sizes.height], () => {
     renderer.setSize(ctx.sizes.width.value, ctx.sizes.height.value)
   }, {

playground/vue/src/pages/basic/index.vue

@@ -43,6 +43,7 @@ const formattedShadowMapType = computed(() => {
 const ctxRef = ref(null)
 
 watch(() => ctxRef.value?.context, (ctx) => {
+  // eslint-disable-next-line no-console
   console.log(ctx)
   // Do something with the context
 })