JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<div id="app">
  <table>
    <tbody v-for="n in items" :items="n" is="v-tbody"></tbody>
  </table>
</div>

CSS

* {
  font-family: monospace;
}

table {
  width: 100%;
}

td {
  border: 1px solid silver;
  padding: 5px;
}

.actions {
  width: 100px;
}

JavaScript

Vue.component('v-tbody', {
  template: `
<tbody>
  <tr>
    <td>{{ items[0] }}</td>
    <td class="actions">
      <button
        v-if="items.length > 1"
        v-text="showAll ? '-' : '+'"
        @click="showAll = !showAll"
      ></button>
    </td>
  </tr>
  <template v-if="showAll">
    <tr v-for="n in items.slice(1)">
      <td>{{ n }}</td>
      <td class="actions"></td>
    </tr>
  </template>
</tbody>`,
  props: [ 'items' ],
  data: () => ({
    showAll: false,
  }),
});

new Vue({
  el: '#app',
  data: {
    items: [
      [ 'hello, world!!', 'fuck the world', 'fuck everything' ],
      [ '!!!!!!!!!!!!!!' ],
      [ 69, 187, 666 ],
    ],
  },
});