Как использовать VueDraggable с групповым фильтром?

Question

Jsfiddle link

https://jsfiddle.net/kiramanson/3bprzokg/

var vm = new Vue({
  el: '#app',
  name: 'mfgActivity',
  data: {
    filterJobGroup: '',
    jobs: [{
        jobNumber: "ITEM 1",
        itemGroup: "A"
      },
      {
        jobNumber: "ITEM 2",
        itemGroup: "A"
      },
      {
        jobNumber: "ITEM 3",
        itemGroup: "A"
      },
      {
        jobNumber: "ITEM 4",
        itemGroup: "B"
      },
      {
        jobNumber: "ITEM 5",
        itemGroup: "B"
      },
      {
        jobNumber: "ITEM 6",
        itemGroup: "B"
      },
      {
        jobNumber: "ITEM 7",
        itemGroup: "B"
      },
      {
        jobNumber: "ITEM 8",
        itemGroup: "C"
      },
      {
        jobNumber: "ITEM 9",
        itemGroup: "C"
      },
      {
        jobNumber: "ITEM 10",
        itemGroup: "C"
      }
    ],
    listJobGroup: [{
        name: "A"
      },
      {
        name: "B"
      },
      {
        name: "C"
      }
    ]
  },
  computed: {
    jobsFiltered() {
      if (this.filterJobGroup === '') {
        return this.jobs
      }
      return _.filter(this.jobs, ['itemGroup', this.filterJobGroup]);

    }
  }
})

.list-complete-item {
  padding: 4px;
  margin-top: 4px;
  border: solid 1px;
  transition: all 1s;
}

.list-complete-enter,
.list-complete-leave-active {
  opacity: 0;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.15.0/vuedraggable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>

<div class="container-fluid" id="app">

  <div class="list-search-item horizontally fitted item">
    <label for="selectGroup">Group</label>
    <select name="selectGroup" id="selectGroup" v-model="filterJobGroup">
                <option value="" selected> --- </option>
                <option v-for="item in listJobGroup" :key="item" :value="item.name" > {{ item.name }} </option>
              </select>
  </div>
  <div class="container-fluid machine-contents">

    <draggable v-model="jobs">
      <div v-for="(item, index) in jobsFiltered" :key="item.jobNumber" class="list-complete-item">
        <div>
          {{ item.jobNumber }}
        </div>
      </div>
    </draggable>

  </div>

</div>

Пошаговый сценарий

У меня есть список с групповым фильтром (Группы: A, B и C), но я не могу перетаскивать элементы групп B и C, только группу A или без фильтра. Когда я перетаскиваю элемент группы B или C, я сортирую элементы группы A.

Я пытался использовать те же значения в v-модели цикла draggable и v-for.

Я очень стараюсь, но безрезультатно. Я не понял этого.

У кого-нибудь есть простой пример использования VueDraggable с использованием какого-либо фильтра?

Ожидаемое решение

Мне нужно отсортировать элементы с применением фильтра.