Can't set element's scrollLeft properties in VueJS

I'm actually coding an infinite slider in vuejs (using Nuxt 3 RC.10) and I'm facing a problem : my scrollLeft don't want to be reset.

Let me explain. I got two rows of images, and when the left side of the second row collides with the left side of the container, I want to set the scrollLeft to 0. This works perfectly on both browser with Svelte, but I did not succeed with Vuejs. For some reason the second row is glitching. After debuging, my condition is comes true but the problem seems to come from instruction slider.value.scrollLeft = 0

Thanks in advance for your help

Here my component Slider:

(PS: the commented overflow: hidden is for test purposes.

<script setup>
const slider = ref(null)
const scrollEnabled = ref(true)
const centeredComputed = computed(() => {
  return scrollEnabled.value ? "" : "justify-content: center;"
})

function scroll() {
  let rows = document.getElementsByClassName('row')

  slider.value.scrollLeft += 20

  if (scrollEnabled.value && rows[1].getBoundingClientRect().left <= slider.value.getBoundingClientRect().left) {
    slider.value.scrollLeft = 0
  }

  scrollEnabled.value = rows[0].clientWidth > slider.value.clientWidth
}

onMounted(() => {
  slider.value.addEventListener('scroll', scroll)
  window.addEventListener('load', scroll)
  window.addEventListener('resize', scroll)
})

onUnmounted(() => {
  window.removeEventListener('load', scroll)
  window.removeEventListener('resize', scroll)
})
</script>

<template>
  <div ref="slider" class="slider" :style="centeredComputed">
    <div class="row">
      <img v-for="id in 32" class="logo" :src="`../assets/images/partenaires/${id}.png`" :alt="'Partenaire numéro ' + id">
    </div>

    <div v-if="scrollEnabled" class="row">
      <img v-for="id in 32" class="logo" :src="`../assets/images/partenaires/${id}.png`" :alt="'Partenaire numéro ' + id">
    </div>
  </div>
</template>

<style lang='scss' scoped>
.slider {
  width: 100%;
  height: 100%;
  white-space: nowrap;
  //overflow-x: hidden;
  overflow: auto;

  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
}

.row {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
}

.logo {
  display: inline-flex;
  margin: 0 2rem;
  height: 100%;
}
</style>