docs: improve ContextMenu example

docs/pages/examples.vue

@@ -170,7 +170,7 @@
         Context menu:
       </div>
 
-      <UCard ref="contextMenuRef" class="relative" body-class="h-64" @click="isContextMenuOpen = false" @contextmenu.prevent="isContextMenuOpen = true">
+      <UCard ref="contextMenuRef" class="relative" body-class="h-64" @click="isContextMenuOpen = false" @contextmenu.prevent="openContextMenu">
         <UContextMenu v-model="isContextMenuOpen" :virtual-element="virtualElement" width-class="w-48">
           <UCard @click.stop>
             Menu
@@ -292,19 +292,20 @@ onMounted(() => {
   })
 })
 
-const virtualElement = computed(() => ({
+const virtualElement = ref({ getBoundingClientRect: () => ({}) })
-  getBoundingClientRect () {
+
-    return {
+function openContextMenu () {
-      width: 0,
+  const top = unref(y)
-      height: 0,
+  const left = unref(x)
-      top: y.value,
+
-      right: x.value,
+  virtualElement.value.getBoundingClientRect = () => ({
-      bottom: y.value,
+    width: 0,
-      left: x.value
+    height: 0,
-    }
+    top,
-  },
+    left
-  contextElement: contextMenuRef.value?.$el
+  })
-}))
+  isContextMenuOpen.value = true
+}
 
 const customQuery = query => computed(() => query.value ? `${query.value} | =1` : '')