feat: remove useSafeOnMounted workaround

Suspense + Animation issue was fixed vuejs/core#5844

src/components/Cursor.vue

@@ -57,9 +57,7 @@ const refreshItems = () => {
   focusMouse(cursor, newTexts)
 }
 
-const rootElement = ref(null)
-
-useSafeOnMounted(rootElement, async () => {
+onMounted(() => {
   if (ScrollTrigger.isTouch !== 1) {
     const cursor = document.querySelector('#cursor') as HTMLElement
     cursor.style.backgroundColor = 'transparent'
@@ -122,7 +120,6 @@ onNuxtReady(() => {
 <template>
   <div
     id="cursor"
-    ref="rootElement"
     class="border border-white pe-none position-fixed top-0 start-0 rounded-circle align-items-center justify-content-center"
     :style="{ 'display': 'none', 'height': '0.8rem', 'width': '0.8rem', 'z-index': 5, 'mix-blend-mode': 'exclusion' }"
   />

src/components/Gallery/Grid.vue

@@ -23,12 +23,10 @@ const props = withDefaults(defineProps<Props>(), {
 const imagesData: Ref<any[]> = ref(props.images)
 const lightbox: Ref<PhotoSwipeLightbox|null> = ref(null)
 
-const rootElement = ref<HTMLElement>()
-
-useSafeOnMounted(rootElement, () => {
+onMounted(() => {
   if (!lightbox.value) {
     lightbox.value = new PhotoSwipeLightbox({
-      gallery: rootElement.value.$el,
+      gallery: '.masonry-wall',
       children: 'a',
       pswpModule: () => import('photoswipe'),
       wheelToZoom: true
@@ -73,7 +71,6 @@ watch(() => props.images, (newImages) => {
 
 <template>
   <masonry-wall
-    ref="rootElement"
     :items="imagesData"
     :column-width="columnWidth"
     :min-columns="minColumns"