Issues on dragging arrows

[NIFO43]

Description

I have the problem that the arrows do not go by themselves, one step forward or back. Also, the arrows can be dragged so that it can move. (see video)

Documentation I followed: https://naver.github.io/egjs-flicking/Plugins

Steps to check or reproduce

<script setup lang="ts">
import Flicking from "@egjs/vue3-flicking";
import {Arrow} from "@egjs/flicking-plugins";

const plugins = ref([new Arrow()]);

function test() {
    console.log('button works')
}
</script>

<template>
<Flicking
    ref="swiper"
    :plugins="plugins"
    :options="{ circular: true }"
    class="w-full h-full"
>
    <div
        class="h-full w-full flex bg-cover rounded-md"
        :key="img.id"
        v-for="img in resort.media"
        :style="`background: url('${img.original_url}'); background-size: cover;`"
    >
    </div>
    <template #viewport>
        <span @click="test" class="flicking-arrow-prev"></span>
        <span class="flicking-arrow-next"></span>
    </template>
</Flicking>
</template>

<style scoped>
@import url("@egjs/vue3-flicking/dist/flicking.css");
@import url("@egjs/flicking-plugins/dist/flicking-plugins.css");
@import url("@egjs/flicking-plugins/dist/arrow.css");
</style>

Video

https://github.com/naver/egjs-flicking-plugins/assets/30083590/173b71dc-5833-4989-8861-5d36b9cd192f