title: Vue-Draggable doesn't work properly on b-modal
body: <p>I just met a problem when developing a vue.js app. I'm trying to implement a draggable list in a vue-bootstrap modal. These are my code:</p>
  <pre><code>'''
  
  &lt;b-modal
    id=&quot;modal--layers&quot;
    title=&quot;layers&quot;
    body-class=&quot;d-flex flex-wrap justify-content-around&quot;
    centered
    hide-footer
    @hidden=&quot;onLayerControlHidden&quot;
  &gt;
    &lt;div class=&quot;col-6&quot;&gt;
      &lt;h3&gt;Transition&lt;/h3&gt;
      &lt;draggable
        tag=&quot;transition-group&quot;
        :component-data=&quot;componentData&quot;
        :list=&quot;list&quot;
        class=&quot;list-group&quot;
        draggable=&quot;.item&quot;
        :animation=&quot;100&quot;
        @start=&quot;dragging = true&quot;
        @end=&quot;dragging = false&quot;
      &gt;
        &lt;div
          v-for=&quot;element in list&quot;
          :key=&quot;element.name&quot;
          class=&quot;list-group-item item&quot;
        &gt;
          {{ element.name }}
        &lt;/div&gt;
      &lt;/Draggable&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-3&quot;&gt;
      {{ list }}
    &lt;/div&gt;
  &lt;/b-modal&gt;
  </code></pre>
  <p>'''</p>
  <p>'''</p>
  <pre><code>export default {
    name: 'DesignerPanel',
    display: 'Transition',
    components: {
      Draggable
    },
  
    mixins: [
      SelectedSkuMixin,
      EventsMixin,
      SaveDesignMixin
    ],
  
    data () {
      return {
        list: [
          { name: 'John', id: 0 },
          { name: 'Joao', id: 1 },
          { name: 'Jean', id: 2 }
        ],
        dragging: false,
        componentData: {
          props: {
            type: 'transition',
            name: 'flip-list'
          }
        },
      }
    },
  ...
  </code></pre>
  <p>'''</p>
  <p>It runs perfectly for the first time, but after I close/hide the b-modal and reopen it, it starts giving me errors like this when I try to move the list items:</p>
  <pre><code>vuedraggable.common.js?310e:2340 Uncaught TypeError: Cannot read property 'element' of null
      at VueComponent.onDragStart (vuedraggable.common.js?310e:2340)
      at Sortable.eval (vuedraggable.common.js?310e:1979)
      at dispatchEvent (sortable.esm.js?aa47:916)
      at _dispatchEvent (sortable.esm.js?aa47:961)
      at Sortable._dragStarted (sortable.esm.js?aa47:1570)
  onDragStart @ vuedraggable.common.js?310e:2340
  eval @ vuedraggable.common.js?310e:1979
  dispatchEvent @ sortable.esm.js?aa47:916
  _dispatchEvent @ sortable.esm.js?aa47:961
  _dragStarted @ sortable.esm.js?aa47:1570
  setTimeout (async)
  _nextTick @ sortable.esm.js?aa47:2597
  _onDragStart @ sortable.esm.js?aa47:1792
  vuedraggable.common.js?310e:2384 Uncaught TypeError: Cannot read property 'index' of null
      at VueComponent.onDragUpdate (vuedraggable.common.js?310e:2384)
      at Sortable.eval (vuedraggable.common.js?310e:1979)
      at dispatchEvent (sortable.esm.js?aa47:916)
      at _dispatchEvent (sortable.esm.js?aa47:961)
      at Sortable._onDrop (sortable.esm.js?aa47:2216)
      at Sortable.handleEvent (sortable.esm.js?aa47:2269)
  onDragUpdate @ vuedraggable.common.js?310e:2384
  eval @ vuedraggable.common.js?310e:1979
  dispatchEvent @ sortable.esm.js?aa47:916
  _dispatchEvent @ sortable.esm.js?aa47:961
  _onDrop @ sortable.esm.js?aa47:2216
  handleEvent @ sortable.esm.js?aa47:2269
  </code></pre>
  <p>I've tried using Vuex to control my list, but it doesn't work.</p>