Vuejs List Transition with draggable component

Vuejs List Transition with draggable component.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script src="https://cdn.jsdelivr.net/sortable/1.4.2/Sortable.min.js"></script>
<script src="https://cdn.rawgit.com/David-Desmaisons/Vue.Draggable/master/dist/vuedraggable.js"></script>
<div class="container-fluid" id="app">

  <div v-for="machine in machines">
  
    <div class="container-fluid">
    
      <draggable v-model="machine.jobs">
        <transition-group name="list-complete">
          <div v-for="(job, index) in machine.jobs" 
               v-bind:key="job.jobNumber"
               class="list-complete-item" 
          >
            <div>
              {{ job.jobNumber }}
            </div>
            <div>
              <br>
              <button v-on:click="removeJob(machine.id, job.jobNumber, machine.jobs, index)">Remove</button>
            </div> 
          </div>
        </transition-group>
      </draggable>
      
    </div>   
    
  </div>
  
</div>

CSS

.list-complete {
  padding: 4px;
  margin-top: 4px;
  border: solid 2px;
	background-color: lightblue;
  transition: all 0.5s;
}

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

JavaScript

var vm = new Vue({
    el: '#app',
    name: 'mfgActivity',
    data: {
    	machines: [
      	{
        	name: "H1",
          id: 1,
          jobs: [
          	{
            	jobNumber: "14037-12"
            },
            {
            	jobNumber: "14038-13"
            },
            {
            	jobNumber: "14048-15"
            }
          ]
        }
      ]
    },
    methods: {
  		removeJob: function(machineId, jobNumber, jobs, index) {
      	// Remove job from GUI
        jobs.splice(index, 1);
      }
    }
})