Component to order elements of a list and sublists with Vuetifyjs and Vue.Draggable

nested.vue

<style scoped>
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

.item-sub {
  margin: 0 0 0 1rem;
}

.dragArea {
  min-height: 70px;
  background: #f5f5f5;
}
</style>

<template>
  <draggable
    v-bind="dragOptions"
    tag="div"
    :list="list"
    :value="value"
    class="dragArea"
    @input="emitter"
  >
    <template v-for="v in realValue">
      <v-list :key="v.id">
        <v-list-group>
          <template v-slot:activator>
            <v-list-item-title>{{ v.name }} </v-list-item-title>
            <v-list-item-action>
              <v-btn color="red" icon @click="deleteItem(v.id)">
                <v-icon>mdi-delete</v-icon>
              </v-btn>
            </v-list-item-action>
          </template>
          <nested class="item-sub" v-model="v.submenu" />
        </v-list-group>
      </v-list>
    </template>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';
export default {
  name: 'nested',
  methods: {
    emitter(value) {
      this.$emit('input', value);
    },
    deleteItem(id) {
      const value = this.value.filter((item) => item.id !== id);
      this.$emit('input', value);
    },
  },
  components: {
    draggable,
  },
  computed: {
    dragOptions() {
      return {
        animation: 0,
        group: 'description',
        disabled: false,
        ghostClass: 'ghost',
      };
    },
    // this.value when input = v-model
    // this.list  when input != v-model
    realValue() {
      return this.value ? this.value : this.list;
    },
  },
  props: {
    value: {
      required: false,
      type: Array,
      default: null,
    },
    list: {
      required: false,
      type: Array,
      default: null,
    },
  },
};
</script>