draggable issue

<template>
  <div class="columns">
    <ul>
      <li v-for="lane in lanes">
        <div class="column is-narrow" style="background-color: lightgrey; border: 1px; border-style: solid; border-color: black; margin-right: 10px;">
          <section class="hero is-primary" style="margin-bottom: 12px;">
            <h1 class="title" style="text-align: left; color: black; padding: 3px; background-color: lightgrey;">
              <b>{{lane.name}}</b>
            </h1>
          </section>
          <div class="lane.name container" :id="lane.name" style="padding: 0px; min-height: 20%">
            <draggable :list="list" :options="{group:'people'}" @start="drag=true" @end="onEnd" style="min-height: 300px">
              <div v-for="item in items" :key="item['.key']" v-if="item.lane === lane.name">
                <article class="media handle" :id="item['.key']" :title="item" style="margin-bottom: 5px;  background-color: white">
                  <figure class="media-left">
                    <p class="image is-64x64">
                      <img src="https://st.hzcdn.com/fimgs/4541033103724073_4124-w128-h128-b1-p0--traditional-area-rugs.jpg">
                    </p>
                  </figure>
                  <div class="media-content" id="xxx">
                    <div class="content">
                      <p style="color: black;">
                        <strong style="color: black;"> {{item.customer}} </strong> <small> 10x10 </small>
                        <br>
                      </p>
                    </div>
                    <nav class="level" style="padding-bottom: 4px; min-width: 100%">
                      <div class="level-left" style="min-width: 100%;">
                        <a class="level-item">
                          <span class="tag is-danger is-small"><i class="fa fa-clock-o" aria-hidden="true"  style="padding-right: .3em"></i>Feb 5th</span>
                        </a>
                        <a class="level-item" style="padding-right: 5px">
                          <span class="icon is-small"><i class="fa fa-commenting" aria-hidden="true" >&nbsp;2</i></span>
                        </a>
                        <a class="level-item">
                          <span class="tag is-warning" style="max-height: 10px; padding-top: 5px; padding-bottom: 2px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        </a>
                        <a class="level-item">
                          <i class="fa fa-bell" aria-hidden="true" style="color: red; float: right;"></i>
                        </a>
                      </div>
                    </nav>
                  </div>
                  <div class="media-right">
                    <a class="button is-small" style="margin: 3px; "><b>1</b></a>
                  </div>
                </article>
              </div>
            </draggable>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
var config = {
  apiKey: '',
  databaseURL: 'https://vue-test-2d19a.firebaseio.com'
}
import { mapGetters } from 'vuex'
import { BaseCard, CardFooterItem } from 'vue-bulma-card'
var firebase = require('firebase')
import draggable from 'vuedraggable'
var firebaseApp = firebase.initializeApp(config)
var db = firebaseApp.database()
var itemsRef = db.ref('cards-modules')
export default {
  components: {
    BaseCard,
    CardFooterItem,
    draggable,
    db
  },
  computed: {
    ...mapGetters([
      'items'
    ])
  },
  firebase: {
    'todos.items': itemsRef
  },
  data: function () {
    return {
      newTodo: '',
      lanes: [{'name': 'pre-inspected'}, {name: 'started'}]
    }
  },
  methods: {
    onEnd: function (evt) {
      if (evt.item.offsetParent.id.includes('started')) {
        console.log('started')
        this.changeTodo(evt.item.firstChild.id, evt.item.firstChild.title, 'started')
      }
      if (evt.item.offsetParent.id.includes('pre-inspected')) {
        console.log('pre-inspected')
        this.changeTodo(evt.item.firstChild.id, evt.item.firstChild.title, 'pre-inspected')
      }
    },
    removeTodo: function (key) {
      itemsRef.child(key).remove()
    },
    changeTodo: function (key, text, lane, item) {
      var updates = {}
      var data = {
        text: text,
        lane: lane
      }
      updates[key] = data
      itemsRef.update(updates)
    }
  }
}
</script>