title: Draggable table with bootstrap vue
body: <p>I have been looking for a way to drag and drop rows on a Bootstrap Vue table.
  I was able to find a working version here: <a href="https://codepen.io/elchininet/pen/WzqVax" rel="nofollow noreferrer">Codepen</a></p>
  
  <p>I have tried to implement this code to my own table:</p>
  
  <p>Template:</p>
  
  <pre><code>&lt;b-table  v-sortable="sortableOptions" @click="(row) =&gt; $toast.open(`Clicked ${row.item.name}`)"  :per-page="perPage" :current-page="currentPage"  striped hover :items="blis" :fields="fields" :filter="filter" :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" :sort-direction="sortDirection" @filtered="onFiltered"&gt;
      &lt;template slot="move" slot-scope="row"&gt;
          &lt;i class="fa fa-arrows-alt"&gt;&lt;/i&gt;
      &lt;/template&gt;
  
      &lt;template slot="actions" slot-scope="row"&gt;
          &lt;b-btn :href="'/bli/'+row.item.id" variant="light" size="sm" @click.stop="details(cell.item,cell.index,$event.target)"&gt;&lt;i class="fa fa-pencil"&gt;&lt;/i&gt;&lt;/b-btn&gt;
          &lt;b-btn variant="light" size="sm" @click.stop="details(cell.item,cell.index,$event.target)"&gt;&lt;i class="fa fa-trash"&gt;&lt;/i&gt;&lt;/b-btn&gt;
      &lt;/template&gt;
  
      &lt;template slot="priority" slot-scope="row"&gt;
          &lt;input v-model="row.item.priority" @keyup.enter="row.item.focussed = false; updatePriority(row.item), $emit('update')" @blur="row.item.focussed = false" @focus="row.item.focussed = true" class="form-control" type="number" name="priority" &gt;
      &lt;/template&gt;
  &lt;/b-table&gt;
  </code></pre>
  
  <p>Script:</p>
  
  <pre><code>import Buefy from 'buefy';
  Vue.use(Buefy);
  
  const createSortable = (el, options, vnode) =&gt; {
  
      return Sortable.create(el, {
      ...options
      });
  };
  
  const sortable = {
      name: 'sortable',
      bind(el, binding, vnode) {
      const table = el.querySelector('table');
      table._sortable = createSortable(table.querySelector('tbody'), binding.value, vnode);
      }
  };
  export default {
      name: 'ExampleComponent',
      directives: { sortable },
      data() {
          let self = this;
          return {
              blis: [],
              currentPage: 1,
              perPage: 10,
              pageOptions: [ 5, 10, 15 ],
              totalRows: 0,
              sortBy: null,
              sortDesc: false,
              sortDirection: 'asc',
              sortableOptions: {
                  chosenClass: 'is-selected'
              },
              filter: null,
              modalInfo: { title: 'Title', content: 'priority' },
              fields: [ 
                  {
                      key: 'move',
                      sortable: true
                  },
                  ///...rest of the fields
              ]
      }
  };
  </code></pre>
  
  <p>Now I have been getting this error:  <strong>Error in directive sortable bind hook: "TypeError: Cannot read property 'querySelector' of null"</strong></p>
  
  <p>Why is it not able to find the <code>&lt;tbody&gt;</code> ? </p>
  
  <p>Edit: <a href="https://jsfiddle.net/d7jqtkon/" rel="nofollow noreferrer">https://jsfiddle.net/d7jqtkon/</a></p>