docs: use updateNodeInternals in teleport example

docs/components/examples/teleport/TeleportableNode.vue

@@ -1,6 +1,5 @@
 <script setup>
 import { Handle, Position } from '@braks/vue-flow'
-import { watch } from 'vue'
 import { useTransition } from './useTransition.js'
 
 const props = defineProps({
@@ -8,17 +7,9 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  nodeElement: {
-    type: Object,
-    required: false,
-  },
 })
 
-const { animation, transition, teleport, nodeElement, onClick } = useTransition(props.id, props.nodeElement)
+const { animation, transition, teleport, onClick } = useTransition(props.id)
-
-watch(props, () => {
-  if (props.nodeElement) nodeElement.value = props.nodeElement
-})
 
 const changeAnimation = () => {
   animation.value = animation.value === 'fade' ? 'shrink' : 'fade'

docs/components/examples/teleport/useTransition.js

@@ -8,12 +8,11 @@ import { nextTick, ref } from 'vue'
  * Otherwise edges do not connect properly
  */
 export const useTransition = (id) => {
-  const nodeElement = ref()
   const animation = ref('fade')
   const transition = ref(false)
   const teleport = ref(null)
 
-  const { updateNodeDimensions, getNode, edges } = useVueFlow()
+  const { updateNodeInternals, getNode, edges } = useVueFlow()
 
   /**
    * specify a selector to teleport to
@@ -48,7 +47,7 @@ export const useTransition = (id) => {
         setTimeout(() => {
           // if destination is null, defer hiding edges until node is teleported back
           if (!destination) {
-            updateNodeDimensions([{ id, nodeElement: nodeElement.value, forceUpdate: true }])
+            updateNodeInternals([id])
 
             nextTick(() => {
               onFinish()
@@ -103,7 +102,6 @@ export const useTransition = (id) => {
     animation,
     transition,
     teleport,
-    nodeElement,
     onClick,
   }
 }