[Help]: Accessing embla ref after v-if

[wanted80]

Summary

Hello,

I'm trying to integrate Embla Carousel in a Vue (v3.5.13) component (composition api) and I have an issue when using a v-if on the results ref variable in the parent/root div. Without the v-if="isNotEmpty(results)" control Embla work fine.

Have you guys a suggestion to make it work and keeping the v-if on top?

Thanks.

If applicable, which variants of Embla Carousel are relevant to this question?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

A simplified version of the component:

<script setup lang="ts">
import { ref } from 'vue'
import emblaCarouselVue from 'embla-carousel-vue'
import client from '@/client'
import { isNotEmpty } from '@/helpers'

import type { AxiosError } from 'axios'
import type { EmblaOptionsType } from 'embla-carousel'
import type { FastResultsResponse, MessageErrorResponse } from '@/types'

defineOptions({
  inheritAttrs: false
})

const props = withDefaults(
  defineProps<{
    route: string
    title?: string
  }>(),
  {
    title: undefined,
  }
)

const results = ref<FastResultsResponse | null>(null)
const errorMsg = ref<string>('')
const isLoading = ref<boolean>(false)

const options: EmblaOptionsType = { align: 'start', dragFree: true, loop: false }
const [emblaRef] = emblaCarouselVue(options)

async function fetchData() {
  isLoading.value = true

  try {
    const { data } = await client.post<FastResultsResponse>(props.route)
    results.value = isNotEmpty(data) ? data : null
  } catch (e) {
    const err = e as AxiosError
    errorMsg.value = (err.response?.data as MessageErrorResponse).message
    results.value = null
  } finally {
    isLoading.value = false
  }
}

fetchData()
</script>

<template>
  <div
    v-if="isNotEmpty(results)"
    :class="$attrs.class"
  >
    <div
      class="embla p-2 overflow-hidden"
      ref="emblaRef"
    >
      <div class="embla__container grid grid-cols-[repeat(auto-fill,14rem)] grid-flow-col gap-3 touch-pan-y">
        <div
          v-for="(result, index) in results"
          :key="`slide-${index}`"
          class="embla__slide"
        >
          Slide {{ index }}
        </div>
      </div>
    </div>
  </div>
</template>

CodeSandbox example

No response