Для реализации данной функциональности в Vue 3 с использованием Composition API вам понадобится следующий код:
```html
<template>
<div class="container-slaid">
<div ref="slaid-1">Слайд 1</div>
<div ref="slaid-2">Слайд 2</div>
<div ref="slaid-3">Слайд 3</div>
<button @click="moveSlaid('slaid-1')">Слайд 1</button>
<button @click="moveSlaid('slaid-2')">Слайд 2</button>
<button @click="moveSlaid('slaid-3')">Слайд 3</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const container = ref(null);
const moveSlaid = (slaidRef) => {
const slaid = container.value.querySelector(`[ref="${slaidRef}"]`);
container.value.insertBefore(slaid, container.value.firstChild);
}
return {
container,
moveSlaid
}
}
}
</script>
<style>
.container-slaid {
display: flex;
flex-direction: column;
}
</style>
```
В данном примере у нас есть контейнер `div` с классом `container-slaid`, в котором содержатся блоки div с разными ref-ами. При клике на кнопку вызывается функция `moveSlaid`, которая перемещает соответствующий блок div вверх в контейнере. Кнопки связаны со слайдами по их ref атрибуту.
Надеюсь, этот код поможет вам реализовать нужную функциональность!