<div x-data="{items: ['Item 1', 'Item 2', 'Item 3']}">
  <div
    x-data="{
             resort(item, position) {

                const index = items.findIndex(element => element == item);

                if (index !== -1) {
                    const removedItem = items.splice(index, 1)[0];
                    items.splice(position, 0, removedItem);
                }
              }
             }"
  >
    <p>Sortable</p>
    <p></p>
    <ol x-sort="resort">
      <template
        x-for="item in items"
        :key="item"
      >
        <li
          x-sort:item="item"
          x-text="item"
        ></li>
      </template>
    </ol>

    <p>Sorted</p>
    <p></p>
    <ol>
      <template
        x-for="item in items"
        :key="item"
      >
        <li x-text="item"></li>
      </template>
    </ol>
  </div>
</div>

window.Alpine = Alpine;