如何将VueDraggable与组过滤器一起使用？

Question

Jsfiddle链接

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

`The random number of the moment is ${Math.random()}.`

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;
}

分步方案

我有一个带有组过滤器的列表（组：A，B和C），但是我不能拖动组B和C的项目，只能拖动组A或不使用过滤器。 当我拖动组B或C的项目时，我对组A的项目进行排序。

我也在可拖动循环和v-for循环的v模型中尝试了相同的值。

我正在尝试很多但没有结果。我不知道。

有人使用过滤器有VueDraggable的任何简单示例吗？

期望的解决方案

我需要使用过滤器对项目进行排序。