docs: update examples

docs/components/examples/hidden/App.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { Controls, MiniMap } from '@vue-flow/additional-components'
+import { Background, Panel, PanelPosition } from '@vue-flow/additional-components'
 import { VueFlow, useVueFlow } from '@vue-flow/core'
-import { ref, watchEffect } from 'vue'
+import { ref, watch } from 'vue'
 
 const isHidden = ref(false)
 
@@ -19,24 +19,23 @@ const { nodes, edges } = useVueFlow({
   ],
 })
 
-watchEffect(() => {
+watch(isHidden, () => {
   nodes.value.forEach((n) => (n.hidden = isHidden.value))
   edges.value.forEach((e) => (e.hidden = isHidden.value))
 })
 </script>
 
 <template>
-  <VueFlow>
-    <MiniMap />
-    <Controls />
+  <VueFlow fit-view-on-init>
+    <Background />
 
-    <div :style="{ position: 'absolute', left: '10px', top: '10px', zIndex: 4 }">
+    <Panel :position="PanelPosition.TopRight">
       <div>
         <label for="ishidden">
           hidden
           <input id="ishidden" v-model="isHidden" type="checkbox" />
         </label>
       </div>
-    </div>
+    </Panel>
   </VueFlow>
 </template>