Vue.JS, Vue.Draggable - перемещение нескольких строк таблицы

Question

У меня есть проект, над которым я сейчас работаю, и Vue.Draggable работает потрясающе для установки Vue, которую я использовал. Хотя у меня возникают трудности при попытке перетащить несколько строк таблицы.

https://jsfiddle.net/MrCouchy/vrh9eqn0/

<table>
  <draggable :element="'tbody'">
    <template v-for="category in categories">
      <tr :style="'background-color: ' + category.color">
        <td rowspan="2">{{ category.id }}</td>
        <td>{{ category.name }}</td>
      </tr>
      <tr :style="'background-color: ' + category.color">
        <td>{{ category.updated_at }}</td>
      </tr>
    </template>
  </draggable>
</table>

Таблица, которую я использую, скорее заполнена содержимым, и мне было необходимо поместить переполненное содержимое в новую строку (для каждого элемента), но я хочу сохранить все это в одной группе при перетаскивании, когда вместо первого строка перетаскивается отдельно от второй (как видно из jsfiddle выше)

Единственное решение, которое я нашел до сих пор, - это создать одну строку столбца с другой многострочной таблицей внутри каждого столбца. Хотя это не позволяет правильно выровнять каждый столбец между различными элементами. Но, как видно ниже, это не правильно выровняет все столбцы из-за того, что это разные таблицы.

https://jsfiddle.net/MrCouchy/1xo98p3q/

<table>
  <draggable :element="'tbody'">
    <template v-for="category in categories">
      <table>
        <tr :style="'background-color: ' + category.color">
          <td rowspan="2">{{ category.id }}</td>
          <td>{{ category.name }}</td>
          <td rowspan="2">{{ category.secondary_content }}</td>
        </tr>
        <tr :style="'background-color: ' + category.color">
          <td>{{ category.updated_at }}</td>
        </tr>
      </table>
    </template>
  </draggable>
</table>

Есть ли способ сделать несколько строк таблицы перетаскиваемыми, сохраняя форматирование одинаковым?

заранее спасибо