DOM would never be removed with vue transition

[varHarrie]

When I drag into another container, the HTML element will be added class scale-leave but never be removed.

<template>
  <div class="page-test">
    <div v-for="c in categories">
      <p>{{c.name}}</p>
      <ul v-dragula="c.list">
        <li v-for="item in c.list" transition="scale">{{item}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        categories: [{
          _id: '0000000001',
          name: 'in progress',
          list: ['111', '222']
        }, {
          _id: '0000000002',
          name: 'plan',
          list: ['333']
        }]
      }
    }
  }
</script>

<style lang="stylus">
  .page-test
    .scale-transition
      overflow: hidden
      height: 38px
      transition: height .2s
    .scale-enter,.scale-leave
      height: 0
</style>

[varHarrie]

@Astray-git Still have problems, but not with vue transition.

vue-dragula@1.2.0

At the same conditionm I just replace li element with a custom component. When I drag the component into another container, the source component still exists.

<template>
  <div class="page-test">
    <div v-for="category in categories">
      <h3>{{category.name}}</h3>
      <div v-dragula="category.list">
        <!-- work fine -->
        <!-- <div v-for="item in category.list">{{item.name}}</div> -->

        <!-- buggy -->
        <example v-for="item in category.list" :item="item"></example>
      </div>
    </div>
  </div>
</template>

<script>
  import Example from './Example.vue'
  export default {
    components: {Example},
    data () {
      return {
        categories: [{
          name: 'in progress',
          list: [{name: '1'}, {name: '2'}]
        }, {
          name: 'plan',
          list: [{name: '3'}]
        }]
      }
    }
  }
</script>

Example.vue

<template>
  <div>{{item.name}}</div>
</template>

<script>
export default {
  props: {
    item: {type: Object}
  }
}
</script>