Vue v-forで配置した要素をユーザー操作で順番を入れ替える

v-forで配列を条件に要素を生成しています。
配列の順番を入れ替える関数を要素内のボタンのクリックイベントに登録しています。

See the Pen Vue.js Replace the elements placed by v-for by blue moon (@blue-moon) on CodePen.

<template>
  <ul v-if="show && colors.length">
    <li
      v-for="(color, index) in colors"
      :key="index"
      :style="{ backgroundColor: color.code }"
    >

      // 前へボタン　先頭は表示しない
      <button
        v-show="index > 0"
        class="button button--prev"
        @click.prevent="prev(color)"
      >
        ⇑
      </button>

      <p>{{ color.label }}</p>

      // 後ろへボタン　最後は表示しない
      <button
        v-show="index < colors.length - 1"
        class="button button--next"
        @click.prevent="next(color)"
      >
        ⇓
      </button>

    </li>
  </ul>
</template>

<script setup>
import { ref, reactive } from "vue";
const show = ref(true);
const colors = reactive([
  { label: "blue", code: "#1f248c" },
  { label: "pink", code: "#f2357b" },
  { label: "yellow", code: "#f2e205" }
]);

// 前の要素と入れ替える
function prev(color) {
  let index = colors.indexOf(color);
  colors.splice(index - 1, 2, colors[index], colors[index - 1]);
}

// 後の要素と入れ替える
function next(color) {
  let index = colors.indexOf(color);
  colors.splice(index, 2, colors[index + 1], colors[index]);
}
</script>