NUXT_FRONTEND/components/Admin/MenuList.vue

<template>
  <v-list>
    <v-subheader>{{ title }}</v-subheader>
    <draggable v-model="draggableList" @sort="onSort">
      <transition-group type="transition" name="flip-list">
        <v-list-item
          v-for="link in draggableList"
          class="draggable-item"
          :key="link.id"
          @click=""
        >
          <v-list-item-icon>
            <v-icon>mdi-view-dashboard</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-row>
              <v-col>
                <v-list-item-title>
                  {{ link.title }}
                </v-list-item-title>
                <v-list-item-subtitle>
                  {{ link.url }}
                </v-list-item-subtitle>
              </v-col>
              <v-col class="text-right">
                <v-btn small tile color="success" @click="$emit('openEdit', link)">
                  <v-icon center> mdi-pencil</v-icon>
                </v-btn>
                <v-btn small tile color="error" @click="$emit('delete', link)">
                  <v-icon center> mdi-delete-outline </v-icon>
                </v-btn>
              </v-col>
            </v-row>
          </v-list-item-content>
        </v-list-item>
      </transition-group>
    </draggable>
  </v-list>
</template>

<script>
import draggable from "vuedraggable";

export default {
  components: {
    draggable,
  },

  props: {
    list: {
      type: Array,
      required: true,
    },

    title: {
      type: String,
      required: true,
    },
  },

  data: () => ({
    draggableList: [],
  }),

  watch: {
    list: {
      handler() {
        this.draggableList = this.list.slice();
      },
    },
  },

  mounted() {
    this.draggableList = this.list.slice();
  },

  methods: {
    onSort() {
      this.$emit('drag', this.draggableList)
    },
  },
};
</script>

<style lang="less" scoped>
.draggable-item {
  cursor: move;
}
.flip-list-move {
  transition: transform 0.2s;
}
</style>