From 07354e61a23f7d40e59ce2a011fd4437d7441840 Mon Sep 17 00:00:00 2001
From: Rik Smale <13023439+WikiRik@users.noreply.github.com>
Date: Sat, 7 Dec 2024 19:46:06 +0100
Subject: [PATCH] fix(deps): update to buefy 0.9 (#2259)

* fix(deps): update to buefy 0.9

* chore(deps): update package.json

* chore: fix BoardView

* style: fix lint

* chore: migrate new tables

* chore: fix BoardListing

---------

Co-authored-by: WikiRik <WikiRik@users.noreply.github.com>
---
 package-lock.json                             |  17 +-
 package.json                                  |   2 +-
 src/views/core/bodies/BulkImport.vue          |  58 ++--
 src/views/core/bodies/CampaignsList.vue       |  24 +-
 src/views/core/bodies/List.vue                |  50 ++-
 .../core/bodies/ListFeePaymentsModal.vue      |  56 ++--
 src/views/core/bodies/ViewJoinRequests.vue    |  60 ++--
 src/views/core/bodies/ViewMembers.vue         |  78 +++--
 src/views/core/campaigns/List.vue             |  30 +-
 src/views/core/campaigns/ViewMembers.vue      |  28 +-
 src/views/core/circles/List.vue               |  18 +-
 src/views/core/circles/ViewMembers.vue        |  60 ++--
 src/views/core/members/List.vue               |  48 ++-
 src/views/core/members/ListUnconfirmed.vue    |  42 ++-
 src/views/core/permissions/List.vue           |  26 +-
 src/views/core/permissions/ViewMembers.vue    |  12 +-
 src/views/discounts/CategoriesList.vue        |  30 +-
 src/views/discounts/List.vue                  |  38 ++-
 src/views/discounts/MyDiscounts.vue           |  26 +-
 src/views/events/BoardView.vue                |  68 ++--
 src/views/events/ChangeStatus.vue             |  96 +++---
 src/views/events/Edit.vue                     |  34 +-
 src/views/events/Participants.vue             |  92 +++---
 src/views/network/AntennaCriteriaCheck.vue    | 133 ++++----
 src/views/network/BoardListing.vue            |  76 +++--
 src/views/statutory/Accepted.vue              |  60 ++--
 src/views/statutory/Applications.vue          | 107 ++++---
 src/views/statutory/BoardView.vue             |  98 +++---
 src/views/statutory/Debug.vue                 |  18 +-
 .../statutory/DisplayMembersListModal.vue     |  40 ++-
 src/views/statutory/Incoming.vue              | 130 ++++----
 src/views/statutory/Juridical.vue             |  92 +++---
 src/views/statutory/ListMembersLists.vue      |  76 +++--
 .../statutory/ListMissingMembersLists.vue     |  18 +-
 src/views/statutory/NetworkListing.vue        |  78 +++--
 src/views/statutory/PlenariesList.vue         |  46 ++-
 src/views/statutory/PositionsList.vue         | 234 +++++++-------
 src/views/statutory/QuestionLinesList.vue     | 144 +++++----
 src/views/statutory/TasksList.vue             |  32 +-
 src/views/statutory/ViewPlenary.vue           |  48 ++-
 src/views/summeruniversity/BoardView.vue      |  80 +++--
 src/views/summeruniversity/ChangeStatus.vue   | 296 +++++++++---------
 src/views/summeruniversity/Edit.vue           |  38 ++-
 src/views/summeruniversity/EditSecond.vue     |  40 ++-
 src/views/summeruniversity/Participants.vue   | 102 +++---
 45 files changed, 1442 insertions(+), 1537 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4293853f8..6c0594e05 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,7 +27,7 @@
         "@vue/eslint-config-airbnb": "^7.0.0",
         "animate.css": "^4.1.1",
         "axios": "^1.6.5",
-        "buefy": "^0.8.20",
+        "buefy": "^0.9.23",
         "chart.js": "^2.9.4",
         "compression-webpack-plugin": "^6.1.1",
         "css-loader": "^5.2.7",
@@ -7057,25 +7057,20 @@
       }
     },
     "node_modules/buefy": {
-      "version": "0.8.20",
-      "resolved": "https://registry.npmjs.org/buefy/-/buefy-0.8.20.tgz",
-      "integrity": "sha512-pg8Cn0m9cjqp2/vaKT4VIfU8KIumuX/gAT1GtearXRs56+kKqAPx3j9O8cm9W6P4jPUCHajKX6H8AqD0ram2Bg==",
+      "version": "0.9.23",
+      "resolved": "https://registry.npmjs.org/buefy/-/buefy-0.9.23.tgz",
+      "integrity": "sha512-zkmTOUDlh7xx0ID8cSw3Wtm97nkTGU992TcIBBTC41rjKHjJTyQn9fYr8oqvVaCTLNVJmdPnnjDCuYZtHoDEog==",
       "dependencies": {
-        "bulma": "0.7.5"
+        "bulma": "0.9.4"
       },
       "engines": {
         "node": ">= 4.0.0",
         "npm": ">= 3.0.0"
       },
       "peerDependencies": {
-        "vue": "^2.5.18"
+        "vue": "^2.6.11"
       }
     },
-    "node_modules/buefy/node_modules/bulma": {
-      "version": "0.7.5",
-      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.7.5.tgz",
-      "integrity": "sha512-cX98TIn0I6sKba/DhW0FBjtaDpxTelU166pf7ICXpCCuplHWyu6C9LYZmL5PEsnePIeJaiorsTEzzNk3Tsm1hw=="
-    },
     "node_modules/buffer-crc32": {
       "version": "0.2.13",
       "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
diff --git a/package.json b/package.json
index 165aa2b36..a7778f38b 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "@vue/eslint-config-airbnb": "^7.0.0",
     "animate.css": "^4.1.1",
     "axios": "^1.6.5",
-    "buefy": "^0.8.20",
+    "buefy": "^0.9.23",
     "chart.js": "^2.9.4",
     "compression-webpack-plugin": "^6.1.1",
     "css-loader": "^5.2.7",
diff --git a/src/views/core/bodies/BulkImport.vue b/src/views/core/bodies/BulkImport.vue
index 2ac6ccd5a..ba6ecc9ba 100644
--- a/src/views/core/bodies/BulkImport.vue
+++ b/src/views/core/bodies/BulkImport.vue
@@ -15,36 +15,34 @@
         </div>
 
         <b-table :data="members">
-          <template slot-scope="props">
-            <b-table-column field="first_name" label="First name">
-              {{ props.row.first_name }}
-            </b-table-column>
-
-            <b-table-column field="last_name" label="Last name">
-              {{ props.row.last_name }}
-            </b-table-column>
-
-            <b-table-column field="email" label="Email">
-              {{ props.row.email }}
-            </b-table-column>
-
-            <b-table-column field="username" label="Username">
-              {{ props.row.username }}
-            </b-table-column>
-
-            <b-table-column label="Delete user">
-              <a v-if="!props.row.status" @click="members.splice(props.index, 1)" class="button is-danger is-small">
-                <span class="icon"><font-awesome-icon icon="minus" /></span>
-                <span>Delete user</span>
-              </a>
-            </b-table-column>
-
-            <b-table-column label="Status">
-              <span v-if="props.row.status === 'saving'">Saving...</span>
-              <span class="has-text-success" v-if="props.row.status === 'success'">Successfully saved.</span>
-              <span class="has-text-danger" v-if="props.row.status === 'error'">Error while saving: {{ props.row.errors }}</span>
-            </b-table-column>
-          </template>
+          <b-table-column field="first_name" label="First name" v-slot="props">
+            {{ props.row.first_name }}
+          </b-table-column>
+
+          <b-table-column field="last_name" label="Last name" v-slot="props">
+            {{ props.row.last_name }}
+          </b-table-column>
+
+          <b-table-column field="email" label="Email" v-slot="props">
+            {{ props.row.email }}
+          </b-table-column>
+
+          <b-table-column field="username" label="Username" v-slot="props">
+            {{ props.row.username }}
+          </b-table-column>
+
+          <b-table-column label="Delete user" v-slot="props">
+            <a v-if="!props.row.status" @click="members.splice(props.index, 1)" class="button is-danger is-small">
+              <span class="icon"><font-awesome-icon icon="minus" /></span>
+              <span>Delete user</span>
+            </a>
+          </b-table-column>
+
+          <b-table-column label="Status" v-slot="props">
+            <span v-if="props.row.status === 'saving'">Saving...</span>
+            <span class="has-text-success" v-if="props.row.status === 'success'">Successfully saved.</span>
+            <span class="has-text-danger" v-if="props.row.status === 'error'">Error while saving: {{ props.row.errors }}</span>
+          </b-table-column>
 
           <template slot="empty">
             <section class="section">
diff --git a/src/views/core/bodies/CampaignsList.vue b/src/views/core/bodies/CampaignsList.vue
index 458ad644e..90538944c 100644
--- a/src/views/core/bodies/CampaignsList.vue
+++ b/src/views/core/bodies/CampaignsList.vue
@@ -10,21 +10,19 @@
         </div>
 
         <b-table :data="campaigns">
-          <template slot-scope="props">
-            <b-table-column field="name" label="Campaign name">
-              <router-link :to="{ name: 'oms.bodies.campaigns.view', params: { body_id: $route.params.id, id: props.row.id } }">
-                {{ props.row.name }}
-              </router-link>
-            </b-table-column>
+          <b-table-column field="name" label="Campaign name" v-slot="props">
+            <router-link :to="{ name: 'oms.bodies.campaigns.view', params: { body_id: $route.params.id, id: props.row.id } }">
+              {{ props.row.name }}
+            </router-link>
+          </b-table-column>
 
-            <b-table-column field="description_long" label="Description">
-              <span class="description" v-html="$options.filters.markdown(props.row.description_long)" />
-            </b-table-column>
+          <b-table-column field="description_long" label="Description" v-slot="props">
+            <span class="description" v-html="$options.filters.markdown(props.row.description_long)" />
+          </b-table-column>
 
-            <b-table-column label="Link">
-              {{ '/signup/' + props.row.url }}
-            </b-table-column>
-          </template>
+          <b-table-column label="Link" v-slot="props">
+            {{ '/signup/' + props.row.url }}
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/core/bodies/List.vue b/src/views/core/bodies/List.vue
index 619344603..2ed6d72ed 100644
--- a/src/views/core/bodies/List.vue
+++ b/src/views/core/bodies/List.vue
@@ -47,32 +47,30 @@
         </div>
 
         <b-table :data="bodies" :loading="isLoading" narrowed>
-          <template slot-scope="props">
-            <b-table-column field="code" label="Body code" sortable>
-              {{ props.row.code }}
-            </b-table-column>
-
-            <b-table-column field="name" label="Body name" sortable>
-              <router-link :to="{ name: 'oms.bodies.view', params: { id: props.row.id } }">{{ props.row.name}}</router-link>
-            </b-table-column>
-
-            <b-table-column field="type" label="Type" sortable>
-              {{ props.row.type | capitalize }}
-            </b-table-column>
-
-            <b-table-column field="description" label="Description">
-              <span class="body-description" v-html="$options.filters.markdown(props.row.description)" />
-            </b-table-column>
-
-            <b-table-column field="founded_at" label="Foundation date" sortable>
-              {{ props.row.founded_at }}
-            </b-table-column>
-
-            <b-table-column field="status" label="Status" :visible="includeDeleted">
-              <span class="tag is-small is-info" v-if="props.row.status === 'active'">Active</span>
-              <span class="tag is-small is-danger" v-if="props.row.status === 'deleted'">Deleted</span>
-            </b-table-column>
-          </template>
+          <b-table-column field="code" label="Body code" v-slot="props" sortable>
+            {{ props.row.code }}
+          </b-table-column>
+
+          <b-table-column field="name" label="Body name" v-slot="props" sortable>
+            <router-link :to="{ name: 'oms.bodies.view', params: { id: props.row.id } }">{{ props.row.name}}</router-link>
+          </b-table-column>
+
+          <b-table-column field="type" label="Type" v-slot="props" sortable>
+            {{ props.row.type | capitalize }}
+          </b-table-column>
+
+          <b-table-column field="description" label="Description" v-slot="props">
+            <span class="body-description" v-html="$options.filters.markdown(props.row.description)" />
+          </b-table-column>
+
+          <b-table-column field="founded_at" label="Foundation date" v-slot="props" sortable>
+            {{ props.row.founded_at }}
+          </b-table-column>
+
+          <b-table-column field="status" label="Status" :visible="includeDeleted" v-slot="props">
+            <span class="tag is-small is-info" v-if="props.row.status === 'active'">Active</span>
+            <span class="tag is-small is-danger" v-if="props.row.status === 'deleted'">Deleted</span>
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/core/bodies/ListFeePaymentsModal.vue b/src/views/core/bodies/ListFeePaymentsModal.vue
index 612b71b53..5fe7668c3 100644
--- a/src/views/core/bodies/ListFeePaymentsModal.vue
+++ b/src/views/core/bodies/ListFeePaymentsModal.vue
@@ -6,42 +6,40 @@
     </header>
     <section class="modal-card-body">
       <b-table :data="member.payments" v-if="member.payments.length > 0">
-        <template slot-scope="props">
-          <b-table-column field="id" label="#" numeric sortable>
-            {{ props.row.id }}
-          </b-table-column>
+        <b-table-column field="id" label="#" numeric sortable v-slot="props">
+          {{ props.row.id }}
+        </b-table-column>
 
-          <b-table-column field="inserted_at" label="Starts at">
-            {{ props.row.starts }}
-          </b-table-column>
+        <b-table-column field="inserted_at" label="Starts at" v-slot="props">
+          {{ props.row.starts }}
+        </b-table-column>
 
-          <b-table-column field="expires" label="Expires on">
-            {{ props.row.expires }}
-          </b-table-column>
+        <b-table-column field="expires" label="Expires on" v-slot="props">
+          {{ props.row.expires }}
+        </b-table-column>
 
-          <b-table-column field="amount" label="Amount">
-            {{ props.row.amount }}
-          </b-table-column>
+        <b-table-column field="amount" label="Amount" v-slot="props">
+          {{ props.row.amount }}
+        </b-table-column>
 
-          <b-table-column field="currency" label="Currency">
-            {{ props.row.currency }}
-          </b-table-column>
+        <b-table-column field="currency" label="Currency" v-slot="props">
+          {{ props.row.currency }}
+        </b-table-column>
 
-          <b-table-column field="invoice_address" label="Invoice address">
-            {{ props.row.invoice_address }}
-          </b-table-column>
+        <b-table-column field="invoice_address" label="Invoice address" v-slot="props">
+          {{ props.row.invoice_address }}
+        </b-table-column>
 
-          <b-table-column field="invoice_name" label="Invoice name">
-            {{ props.row.invoice_name }}
-          </b-table-column>
+        <b-table-column field="invoice_name" label="Invoice name" v-slot="props">
+          {{ props.row.invoice_name }}
+        </b-table-column>
 
-          <b-table-column label="Delete" centered :visible="canDelete">
-            <a class="button is-small is-danger" @click="askDeleteMemberPaymentFee(props.row, false)">
-              <span class="icon"><font-awesome-icon icon="minus" /></span>
-              <span>Delete</span>
-            </a>
-          </b-table-column>
-        </template>
+        <b-table-column label="Delete" centered :visible="canDelete" v-slot="props">
+          <a class="button is-small is-danger" @click="askDeleteMemberPaymentFee(props.row, false)">
+            <span class="icon"><font-awesome-icon icon="minus" /></span>
+            <span>Delete</span>
+          </a>
+        </b-table-column>
 
         <template slot="empty">
           <empty-table-stub />
diff --git a/src/views/core/bodies/ViewJoinRequests.vue b/src/views/core/bodies/ViewJoinRequests.vue
index 17ebd4598..425640113 100644
--- a/src/views/core/bodies/ViewJoinRequests.vue
+++ b/src/views/core/bodies/ViewJoinRequests.vue
@@ -18,43 +18,41 @@
         </div>
 
         <b-table :data="members" :loading="isLoading" narrowed>
-          <template slot-scope="props">
-            <b-table-column field="user.first_name" label="Name and surname" sortable>
-              <router-link :to="{ name: 'oms.members.view', params: { id: props.row.user_id } }">
-                {{ props.row.user.first_name }} {{ props.row.user.last_name }}
-              </router-link>
-            </b-table-column>
+          <b-table-column field="user.first_name" label="Name and surname" sortable v-slot="props">
+            <router-link :to="{ name: 'oms.members.view', params: { id: props.row.user_id } }">
+              {{ props.row.user.first_name }} {{ props.row.user.last_name }}
+            </router-link>
+          </b-table-column>
 
-            <b-table-column field="motivation" label="Motivation">
-              {{ props.row.motivation }}
-            </b-table-column>
+          <b-table-column field="motivation" label="Motivation" v-slot="props">
+            {{ props.row.motivation }}
+          </b-table-column>
 
-            <b-table-column field="created_at" label="Date" sortable>
-              {{ props.row.created_at | datetime }}
-            </b-table-column>
+          <b-table-column field="created_at" label="Date" sortable v-slot="props">
+            {{ props.row.created_at | datetime }}
+          </b-table-column>
 
-            <b-table-column label="Approve">
-              <div class="field" v-if="props.row.status === 'pending'">
-                <div class="control">
-                  <a class="button is-small is-info" @click="askSetMemberApproved(props.row, true)">
-                    <span class="icon"><font-awesome-icon icon="plus" /></span>
-                    <span>Approve</span>
-                  </a>
-                </div>
+          <b-table-column label="Approve" v-slot="props">
+            <div class="field" v-if="props.row.status === 'pending'">
+              <div class="control">
+                <a class="button is-small is-info" @click="askSetMemberApproved(props.row, true)">
+                  <span class="icon"><font-awesome-icon icon="plus" /></span>
+                  <span>Approve</span>
+                </a>
               </div>
-            </b-table-column>
+            </div>
+          </b-table-column>
 
-            <b-table-column label="Reject">
-              <div class="field" v-if="props.row.status === 'pending'">
-                <div class="control">
-                  <a class="button is-small is-danger" @click="askSetMemberApproved(props.row, false)">
-                    <span class="icon"><font-awesome-icon icon="minus" /></span>
-                    <span>Reject</span>
-                  </a>
-                </div>
+          <b-table-column label="Reject" v-slot="props">
+            <div class="field" v-if="props.row.status === 'pending'">
+              <div class="control">
+                <a class="button is-small is-danger" @click="askSetMemberApproved(props.row, false)">
+                  <span class="icon"><font-awesome-icon icon="minus" /></span>
+                  <span>Reject</span>
+                </a>
               </div>
-            </b-table-column>
-          </template>
+            </div>
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/core/bodies/ViewMembers.vue b/src/views/core/bodies/ViewMembers.vue
index 172d99567..210e863c1 100644
--- a/src/views/core/bodies/ViewMembers.vue
+++ b/src/views/core/bodies/ViewMembers.vue
@@ -31,52 +31,50 @@
           :per-page="limit"
           default-sort="user.first_name"
           default-sort-direction="asc">
-          <template slot-scope="props">
-            <b-table-column field="user.first_name" label="First and last name" sortable>
-              <router-link :to="{ name: 'oms.members.view', params: { id: props.row.user_id } }" v-if="can.viewMember">
-                {{ props.row.user.first_name }} {{ props.row.user.last_name }}
-              </router-link>
-              <span v-if="!can.viewMember">
-                {{ props.row.user.first_name }} {{ props.row.user.last_name }}
-              </span>
-            </b-table-column>
+          <b-table-column field="user.first_name" label="First and last name" sortable v-slot="props">
+            <router-link :to="{ name: 'oms.members.view', params: { id: props.row.user_id } }" v-if="can.viewMember">
+              {{ props.row.user.first_name }} {{ props.row.user.last_name }}
+            </router-link>
+            <span v-if="!can.viewMember">
+              {{ props.row.user.first_name }} {{ props.row.user.last_name }}
+            </span>
+          </b-table-column>
 
-            <b-table-column field="comment" label="Comment">
-              {{ props.row.comment }}
-            </b-table-column>
+          <b-table-column field="comment" label="Comment" v-slot="props">
+            {{ props.row.comment }}
+          </b-table-column>
 
-            <b-table-column field="lastPaymentExpires" sortable label="Last payment exp. date" centered :visible="can.viewPayment && body.pays_fees">
-              <span v-if="props.row.payments && props.row.payments.length > 0">{{ getLastPaymentExpiration(props.row) | date }}</span>
-            </b-table-column>
+          <b-table-column field="lastPaymentExpires" sortable label="Last payment exp. date" centered :visible="can.viewPayment && body.pays_fees" v-slot="props">
+            <span v-if="props.row.payments && props.row.payments.length > 0">{{ getLastPaymentExpiration(props.row) | date }}</span>
+          </b-table-column>
 
-            <b-table-column label="View payments" centered :visible="(can.viewPayment || can.createPayment) && body.pays_fees">
-              <a class="button is-small is-primary" @click="openListFeePaymentsModal(props.row)">
-                <span class="icon"><font-awesome-icon icon="dollar-sign" /></span>
-                <span>View or manage payments</span>
-              </a>
-            </b-table-column>
+          <b-table-column label="View payments" centered :visible="(can.viewPayment || can.createPayment) && body.pays_fees" v-slot="props">
+            <a class="button is-small is-primary" @click="openListFeePaymentsModal(props.row)">
+              <span class="icon"><font-awesome-icon icon="dollar-sign" /></span>
+              <span>View or manage payments</span>
+            </a>
+          </b-table-column>
 
-            <b-table-column label="Add payment" centered :visible="can.createPayment && body.pays_fees">
-              <a class="button is-small is-primary" @click="openAddFeePaymentModal(props.row)">
-                <span class="icon"><font-awesome-icon icon="dollar-sign" /></span>
-                <span>Add fee payment</span>
-              </a>
-            </b-table-column>
+          <b-table-column label="Add payment" centered :visible="can.createPayment && body.pays_fees" v-slot="props">
+            <a class="button is-small is-primary" @click="openAddFeePaymentModal(props.row)">
+              <span class="icon"><font-awesome-icon icon="dollar-sign" /></span>
+              <span>Add fee payment</span>
+            </a>
+          </b-table-column>
 
-            <b-table-column label="Edit" centered :visible="can.edit">
-              <a class="button is-small is-warning" @click="askToChangeComment(props.row)">
-                <span class="icon"><font-awesome-icon icon="edit" /></span>
-                <span>Edit</span>
-              </a>
-            </b-table-column>
+          <b-table-column label="Edit" centered :visible="can.edit" v-slot="props">
+            <a class="button is-small is-warning" @click="askToChangeComment(props.row)">
+              <span class="icon"><font-awesome-icon icon="edit" /></span>
+              <span>Edit</span>
+            </a>
+          </b-table-column>
 
-            <b-table-column label="Delete" centered :visible="can.delete">
-              <a class="button is-small is-danger" @click="askDeleteMember(props.row, false)">
-                <span class="icon"><font-awesome-icon icon="minus" /></span>
-                <span>Delete</span>
-              </a>
-            </b-table-column>
-          </template>
+          <b-table-column label="Delete" centered :visible="can.delete" v-slot="props">
+            <a class="button is-small is-danger" @click="askDeleteMember(props.row, false)">
+              <span class="icon"><font-awesome-icon icon="minus" /></span>
+              <span>Delete</span>
+            </a>
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/core/campaigns/List.vue b/src/views/core/campaigns/List.vue
index 190324e23..ec2c942a7 100644
--- a/src/views/core/campaigns/List.vue
+++ b/src/views/core/campaigns/List.vue
@@ -19,25 +19,23 @@
         <b-table
           :data="campaigns"
           :loading="isLoading">
-          <template slot-scope="props">
-            <b-table-column field="id" label="#" numeric sortable>
-              {{ props.row.id }}
-            </b-table-column>
+          <b-table-column field="id" label="#" numeric sortable v-slot="props">
+            {{ props.row.id }}
+          </b-table-column>
 
-            <b-table-column field="name" label="Campaign name" sortable>
-              <router-link :to="{ name: 'oms.campaigns.view', params: { id: props.row.id } }">
-                {{ props.row.name }}
-              </router-link>
-            </b-table-column>
+          <b-table-column field="name" label="Campaign name" sortable v-slot="props">
+            <router-link :to="{ name: 'oms.campaigns.view', params: { id: props.row.id } }">
+              {{ props.row.name }}
+            </router-link>
+          </b-table-column>
 
-            <b-table-column field="description_long" label="Description">
-              <span class="description" v-html="$options.filters.markdown(props.row.description_long)" />
-            </b-table-column>
+          <b-table-column field="description_long" label="Description" v-slot="props">
+            <span class="description" v-html="$options.filters.markdown(props.row.description_long)" />
+          </b-table-column>
 
-            <b-table-column label="Link">
-              {{ '/signup/' + props.row.url }}
-            </b-table-column>
-          </template>
+          <b-table-column label="Link" v-slot="props">
+            {{ '/signup/' + props.row.url }}
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/core/campaigns/ViewMembers.vue b/src/views/core/campaigns/ViewMembers.vue
index 4d2d7bac1..c1563a0c4 100644
--- a/src/views/core/campaigns/ViewMembers.vue
+++ b/src/views/core/campaigns/ViewMembers.vue
@@ -18,23 +18,21 @@
         :per-page="limit"
         default-sort="id"
         default-sort-direction="desc">
-        <template slot-scope="props">
-          <b-table-column field="id" label="#" numeric sortable>
-            {{ props.row.id }}
-          </b-table-column>
+        <b-table-column field="id" label="#" numeric sortable v-slot="props">
+          {{ props.row.id }}
+        </b-table-column>
 
-          <b-table-column field="first_name" label="User" sortable>
-            <router-link :to="{ name: 'oms.members.view', params: { id: props.row.url || props.row.id } }">
-              {{ props.row.first_name }} {{ props.row.last_name }}
-            </router-link>
-          </b-table-column>
+        <b-table-column field="first_name" label="User" sortable v-slot="props">
+          <router-link :to="{ name: 'oms.members.view', params: { id: props.row.url || props.row.id } }">
+            {{ props.row.first_name }} {{ props.row.last_name }}
+          </router-link>
+        </b-table-column>
 
-          <b-table-column field="mail_confirmed" label="Email confirmed?" sortable>
-            <span class="tag is-small" :class="(props.row.mail_confirmed_at) ? 'is-primary' : 'is-danger'">
-              {{ !!props.row.mail_confirmed_at | beautify }}
-            </span>
-          </b-table-column>
-        </template>
+        <b-table-column field="mail_confirmed" label="Email confirmed?" sortable v-slot="props">
+          <span class="tag is-small" :class="(props.row.mail_confirmed_at) ? 'is-primary' : 'is-danger'">
+            {{ !!props.row.mail_confirmed_at | beautify }}
+          </span>
+        </b-table-column>
 
         <template slot="empty">
           <empty-table-stub />
diff --git a/src/views/core/circles/List.vue b/src/views/core/circles/List.vue
index 20e3de19c..82420f122 100644
--- a/src/views/core/circles/List.vue
+++ b/src/views/core/circles/List.vue
@@ -26,17 +26,15 @@
         <b-table
           :data="circles"
           :loading="isLoading">
-          <template slot-scope="props">
-            <b-table-column field="name" label="Circle name" width="150">
-              <router-link :to="{ name: 'oms.circles.view', params: { id: props.row.id } }">
-                {{ props.row.name }}
-              </router-link>
-            </b-table-column>
+          <b-table-column field="name" label="Circle name" width="150" v-slot="props">
+            <router-link :to="{ name: 'oms.circles.view', params: { id: props.row.id } }">
+              {{ props.row.name }}
+            </router-link>
+          </b-table-column>
 
-            <b-table-column field="description" label="Description">
-              {{ props.row.description }}
-            </b-table-column>
-          </template>
+          <b-table-column field="description" label="Description" v-slot="props">
+            {{ props.row.description }}
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/core/circles/ViewMembers.vue b/src/views/core/circles/ViewMembers.vue
index d77eb1e89..e07c6b3e4 100644
--- a/src/views/core/circles/ViewMembers.vue
+++ b/src/views/core/circles/ViewMembers.vue
@@ -15,37 +15,35 @@
         <b-table
           :data="members"
           :loading="isLoading">
-          <template slot-scope="props">
-            <b-table-column field="user.first_name" label="Name and surname" sortable>
-              <router-link :to="{ name: 'oms.members.view', params: { id: props.row.user.username || props.row.user.id } }">
-                {{ props.row.user.first_name }} {{ props.row.user.last_name }}
-              </router-link>
-            </b-table-column>
-
-            <b-table-column field="position" label="Position">
-              {{ props.row.position }}
-            </b-table-column>
-
-            <!-- <b-table-column field="circle_admin" label="Is circle admin?">
-              <span :class="{ 'tag': props.row.circle_admin, 'is-primary': props.row.circle_admin, 'is-small': props.row.circle_admin }">
-                {{ props.row.circle_admin | beautify}}
-              </span>
-            </b-table-column> -->
-
-            <b-table-column label="Edit" :visible="can.edit" centered>
-              <a class="button is-small is-warning" @click="editMemberModal(props.row)">
-                <span class="icon"><font-awesome-icon icon="edit" /></span>
-                <span>Edit</span>
-              </a>
-            </b-table-column>
-
-            <b-table-column label="Delete" :visible="can.delete" centered>
-              <a class="button is-small is-danger" @click="askDeleteMember(props.row, false)">
-                <span class="icon"><font-awesome-icon icon="minus" /></span>
-                <span>Delete</span>
-              </a>
-            </b-table-column>
-          </template>
+          <b-table-column field="user.first_name" label="Name and surname" sortable v-slot="props">
+            <router-link :to="{ name: 'oms.members.view', params: { id: props.row.user.username || props.row.user.id } }">
+              {{ props.row.user.first_name }} {{ props.row.user.last_name }}
+            </router-link>
+          </b-table-column>
+
+          <b-table-column field="position" label="Position" v-slot="props">
+            {{ props.row.position }}
+          </b-table-column>
+
+          <!-- <b-table-column field="circle_admin" label="Is circle admin?" v-slot="props">
+            <span :class="{ 'tag': props.row.circle_admin, 'is-primary': props.row.circle_admin, 'is-small': props.row.circle_admin }">
+              {{ props.row.circle_admin | beautify}}
+            </span>
+          </b-table-column> -->
+
+          <b-table-column label="Edit" :visible="can.edit" centered v-slot="props">
+            <a class="button is-small is-warning" @click="editMemberModal(props.row)">
+              <span class="icon"><font-awesome-icon icon="edit" /></span>
+              <span>Edit</span>
+            </a>
+          </b-table-column>
+
+          <b-table-column label="Delete" :visible="can.delete" centered v-slot="props">
+            <a class="button is-small is-danger" @click="askDeleteMember(props.row, false)">
+              <span class="icon"><font-awesome-icon icon="minus" /></span>
+              <span>Delete</span>
+            </a>
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/core/members/List.vue b/src/views/core/members/List.vue
index 0317fb26d..64f86d98b 100644
--- a/src/views/core/members/List.vue
+++ b/src/views/core/members/List.vue
@@ -21,37 +21,35 @@
           @page-change="onPageChange"
           :default-sort="[sortField, sortOrder]"
           @sort="onSort">
-          <template slot-scope="props">
-            <b-table-column field="id" label="#" numeric sortable>
-              {{ props.row.id }}
-            </b-table-column>
+          <b-table-column field="id" label="#" numeric sortable v-slot="props">
+            {{ props.row.id }}
+          </b-table-column>
 
-            <b-table-column field="first_name" label="Name and surname" sortable width="150">
-              <router-link :to="{ name: 'oms.members.view', params: { id: props.row.username || props.row.id } }">
-                {{ props.row.first_name }} {{ props.row.last_name }}
-              </router-link>
-            </b-table-column>
+          <b-table-column field="first_name" label="Name and surname" sortable width="150" v-slot="props">
+            <router-link :to="{ name: 'oms.members.view', params: { id: props.row.username || props.row.id } }">
+              {{ props.row.first_name }} {{ props.row.last_name }}
+            </router-link>
+          </b-table-column>
 
-            <b-table-column field="email" label="Notification email">
-              {{ props.row.notification_email }}
-            </b-table-column>
+          <b-table-column field="email" label="Notification email" v-slot="props">
+            {{ props.row.notification_email }}
+          </b-table-column>
 
-            <b-table-column field="date_of_birth" label="Birthday" sortable width="150">
-              {{ props.row.date_of_birth }}
-            </b-table-column>
+          <b-table-column field="date_of_birth" label="Birthday" sortable width="150" v-slot="props">
+            {{ props.row.date_of_birth }}
+          </b-table-column>
 
-            <b-table-column field="address" label="Address">
-              {{ props.row.address }}
-            </b-table-column>
+          <b-table-column field="address" label="Address" v-slot="props">
+            {{ props.row.address }}
+          </b-table-column>
 
-            <b-table-column field="about_me" label="About me">
-              {{ props.row.about_me }}
-            </b-table-column>
+          <b-table-column field="about_me" label="About me" v-slot="props">
+            {{ props.row.about_me }}
+          </b-table-column>
 
-            <b-table-column field="created_at" label="Registration date" sortable>
-              {{ props.row.created_at | datetime }}
-            </b-table-column>
-          </template>
+          <b-table-column field="created_at" label="Registration date" sortable v-slot="props">
+            {{ props.row.created_at | datetime }}
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/core/members/ListUnconfirmed.vue b/src/views/core/members/ListUnconfirmed.vue
index c6a033619..267b25a5c 100644
--- a/src/views/core/members/ListUnconfirmed.vue
+++ b/src/views/core/members/ListUnconfirmed.vue
@@ -21,32 +21,30 @@
           @page-change="onPageChange"
           :default-sort="[sortField, sortOrder]"
           @sort="onSort">
-          <template slot-scope="props">
-            <b-table-column field="id" label="#" numeric sortable>
-              {{ props.row.id }}
-            </b-table-column>
+          <b-table-column field="id" label="#" numeric sortable v-slot="props">
+            {{ props.row.id }}
+          </b-table-column>
 
-            <b-table-column field="first_name" label="Name and surname" sortable width="150">
-              <router-link :to="{ name: 'oms.members.view', params: { id: props.row.username || props.row.id } }">
-                {{ props.row.first_name }} {{ props.row.last_name }}
-              </router-link>
-            </b-table-column>
+          <b-table-column field="first_name" label="Name and surname" sortable width="150" v-slot="props">
+            <router-link :to="{ name: 'oms.members.view', params: { id: props.row.username || props.row.id } }">
+              {{ props.row.first_name }} {{ props.row.last_name }}
+            </router-link>
+          </b-table-column>
 
-            <b-table-column field="email" label="Email">
-              {{ props.row.email }}
-            </b-table-column>
+          <b-table-column field="email" label="Email" v-slot="props">
+            {{ props.row.email }}
+          </b-table-column>
 
-            <b-table-column field="created_at" label="Registration date" sortable>
-              {{ props.row.created_at | datetime }}
-            </b-table-column>
+          <b-table-column field="created_at" label="Registration date" sortable v-slot="props">
+            {{ props.row.created_at | datetime }}
+          </b-table-column>
 
-            <b-table-column label="Confirm">
-              <a class="button is-small is-info" @click="askConfirm(props.row, props.index)">
-                <span class="icon"><font-awesome-icon icon="plus" /></span>
-                <span>Confirm</span>
-              </a>
-            </b-table-column>
-          </template>
+          <b-table-column label="Confirm" v-slot="props">
+            <a class="button is-small is-info" @click="askConfirm(props.row, props.index)">
+              <span class="icon"><font-awesome-icon icon="plus" /></span>
+              <span>Confirm</span>
+            </a>
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/core/permissions/List.vue b/src/views/core/permissions/List.vue
index 38ff2c97d..696cb427b 100644
--- a/src/views/core/permissions/List.vue
+++ b/src/views/core/permissions/List.vue
@@ -19,22 +19,20 @@
         <b-table
           :data="permissions"
           :loading="isLoading">
-          <template slot-scope="props">
-            <b-table-column field="combined" label="Permission code" sortable width="200">
-              <router-link :to="{ name: 'oms.permissions.view', params: { id: props.row.id } }">
-                {{ props.row.combined }}
-              </router-link>
-            </b-table-column>
+          <b-table-column field="combined" label="Permission code" sortable width="200" v-slot="props">
+            <router-link :to="{ name: 'oms.permissions.view', params: { id: props.row.id } }">
+              {{ props.row.combined }}
+            </router-link>
+          </b-table-column>
 
-            <b-table-column field="description" label="Description">
-              {{ props.row.description }}
-            </b-table-column>
+          <b-table-column field="description" label="Description" v-slot="props">
+            {{ props.row.description }}
+          </b-table-column>
 
-            <b-table-column label="Additional info">
-              <span class="tag is-info" v-if="props.row.always_assigned">Always assigned</span>
-              <span class="tag is-warning" v-if="props.row.filters.length > 0">Has filters</span>
-            </b-table-column>
-          </template>
+          <b-table-column label="Additional info" v-slot="props">
+            <span class="tag is-info" v-if="props.row.always_assigned">Always assigned</span>
+            <span class="tag is-warning" v-if="props.row.filters.length > 0">Has filters</span>
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/core/permissions/ViewMembers.vue b/src/views/core/permissions/ViewMembers.vue
index a1be32e92..58c63e6d7 100644
--- a/src/views/core/permissions/ViewMembers.vue
+++ b/src/views/core/permissions/ViewMembers.vue
@@ -7,13 +7,11 @@
         <b-table
           :data="members"
           :loading="isLoading">
-          <template slot-scope="props">
-            <b-table-column field="first_name" label="Name and surname" sortable>
-              <router-link :to="{ name: 'oms.members.view', params: { id: props.row.seo_url || props.row.id } }">
-                {{ props.row.first_name }} {{ props.row.last_name }}
-              </router-link>
-            </b-table-column>
-          </template>
+          <b-table-column field="first_name" label="Name and surname" sortable v-slot="props">
+            <router-link :to="{ name: 'oms.members.view', params: { id: props.row.seo_url || props.row.id } }">
+              {{ props.row.first_name }} {{ props.row.last_name }}
+            </router-link>
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/discounts/CategoriesList.vue b/src/views/discounts/CategoriesList.vue
index ee464d9c2..c46ea590d 100644
--- a/src/views/discounts/CategoriesList.vue
+++ b/src/views/discounts/CategoriesList.vue
@@ -11,25 +11,23 @@
         </div>
 
         <b-table :data="categories" :loading="isLoading" narrowed>
-          <template slot-scope="props">
-            <b-table-column field="name" label="Name">
-              {{ props.row.name }}
-            </b-table-column>
+          <b-table-column field="name" label="Name" v-slot="props">
+            {{ props.row.name }}
+          </b-table-column>
 
-            <b-table-column field="discounts" label="Discounts">
-              <ul v-for="(discount, index) in props.row.discounts" v-bind:key="index">
-                <li>{{ discount.name }}</li>
-              </ul>
-            </b-table-column>
+          <b-table-column field="discounts" label="Discounts" v-slot="props">
+            <ul v-for="(discount, index) in props.row.discounts" v-bind:key="index">
+              <li>{{ discount.name }}</li>
+            </ul>
+          </b-table-column>
 
-            <b-table-column label="Edit">
-              <router-link :to="{ name: 'oms.discounts.categories.edit', params: { id: props.row.id } }" class="button is-small is-warning">Edit</router-link>
-            </b-table-column>
+          <b-table-column label="Edit" v-slot="props">
+            <router-link :to="{ name: 'oms.discounts.categories.edit', params: { id: props.row.id } }" class="button is-small is-warning">Edit</router-link>
+          </b-table-column>
 
-            <b-table-column label="Delete">
-              <button @click="askDeleteCategory(props.index)" class="button is-small is-danger">Delete</button>
-            </b-table-column>
-          </template>
+          <b-table-column label="Delete" v-slot="props">
+            <button @click="askDeleteCategory(props.index)" class="button is-small is-danger">Delete</button>
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/discounts/List.vue b/src/views/discounts/List.vue
index 6a94d38b1..80aeaef51 100644
--- a/src/views/discounts/List.vue
+++ b/src/views/discounts/List.vue
@@ -11,31 +11,29 @@
         </div>
 
         <b-table :data="integrations" :loading="isLoading" narrowed>
-          <template slot-scope="props">
-            <b-table-column field="name" label="Name">
-              {{ props.row.name }}
-            </b-table-column>
+          <b-table-column field="name" label="Name" v-slot="props">
+            {{ props.row.name }}
+          </b-table-column>
 
-            <b-table-column field="code" label="Code">
-              {{ props.row.code }}
-            </b-table-column>
+          <b-table-column field="code" label="Code" v-slot="props">
+            {{ props.row.code }}
+          </b-table-column>
 
-            <b-table-column field="description" label="Description">
-              <span v-html="$options.filters.markdown(props.row.description)" />
-            </b-table-column>
+          <b-table-column field="description" label="Description" v-slot="props">
+            <span v-html="$options.filters.markdown(props.row.description)" />
+          </b-table-column>
 
-            <b-table-column label="Quota">
-              {{ props.row.quota_amount }}/{{ props.row.quota_period }}
-            </b-table-column>
+          <b-table-column label="Quota" v-slot="props">
+            {{ props.row.quota_amount }}/{{ props.row.quota_period }}
+          </b-table-column>
 
-            <b-table-column label="Edit">
-              <router-link :to="{ name: 'oms.discounts.edit', params: { id: props.row.id } }" class="button is-small is-warning">Edit</router-link>
-            </b-table-column>
+          <b-table-column label="Edit" v-slot="props">
+            <router-link :to="{ name: 'oms.discounts.edit', params: { id: props.row.id } }" class="button is-small is-warning">Edit</router-link>
+          </b-table-column>
 
-            <b-table-column label="Add codes">
-              <router-link :to="{ name: 'oms.discounts.add_codes', params: { id: props.row.id } }" class="button is-small is-warning">Add codes</router-link>
-            </b-table-column>
-          </template>
+          <b-table-column label="Add codes" v-slot="props">
+            <router-link :to="{ name: 'oms.discounts.add_codes', params: { id: props.row.id } }" class="button is-small is-warning">Add codes</router-link>
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/discounts/MyDiscounts.vue b/src/views/discounts/MyDiscounts.vue
index 5e5b8c885..cc95ae9e7 100644
--- a/src/views/discounts/MyDiscounts.vue
+++ b/src/views/discounts/MyDiscounts.vue
@@ -19,23 +19,21 @@
         </div>
 
         <b-table :data="codes" :loading="isLoading" narrowed>
-          <template slot-scope="props">
-            <b-table-column field="code" label="Code">
-              {{ props.row.value }}
-            </b-table-column>
+          <b-table-column field="code" label="Code" v-slot="props">
+            {{ props.row.value }}
+          </b-table-column>
 
-            <b-table-column field="updated_at" label="Claimed on">
-              {{ props.row.updated_at | datetimeseconds }}
-            </b-table-column>
+          <b-table-column field="updated_at" label="Claimed on" v-slot="props">
+            {{ props.row.updated_at | datetimeseconds }}
+          </b-table-column>
 
-            <b-table-column field="name" label="Partner name">
-              {{ props.row.integration.name }}
-            </b-table-column>
+          <b-table-column field="name" label="Partner name" v-slot="props">
+            {{ props.row.integration.name }}
+          </b-table-column>
 
-            <b-table-column field="description" label="Description">
-              <span v-html="$options.filters.markdown(props.row.integration.description)" />
-            </b-table-column>
-          </template>
+          <b-table-column field="description" label="Description" v-slot="props">
+            <span v-html="$options.filters.markdown(props.row.integration.description)" />
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/events/BoardView.vue b/src/views/events/BoardView.vue
index 9caa6aee7..d0cde4dcc 100644
--- a/src/views/events/BoardView.vue
+++ b/src/views/events/BoardView.vue
@@ -35,41 +35,39 @@
           default-sort="updated_at"
           default-sort-direction="desc"
           v-if="selectedBody && boardBodies.length > 0">
-          <template slot-scope="props">
-            <b-table-column field="updated_at" label="Date modified" sortable>
-              {{ props.row.updated_at | datetime }}
-            </b-table-column>
-
-            <b-table-column field="event.name" label="Event" sortable>
-              <router-link :to="{ name: 'oms.events.view', params: { id: props.row.event.url } }">
-                {{ props.row.event.name }}
-              </router-link>
-            </b-table-column>
-
-            <b-table-column field="first_name" label="Name" sortable>
-              <router-link :to="{ name: 'oms.members.view', params: { id: props.row.user_id } }">
-                {{ props.row.first_name }} {{ props.row.last_name }}
-              </router-link>
-            </b-table-column>
-
-            <b-table-column field="board_comment" label="Board comment">
-              <textarea class="textarea" v-model="props.row.board_comment" />
-            </b-table-column>
-
-            <b-table-column field="status" label="Status" sortable>
-              <span v-if="props.row.status === 'accepted'">Accepted</span>
-              <span v-if="props.row.status === 'rejected'">Rejected</span>
-              <span v-if="props.row.status === 'waiting_list'">Waiting list</span>
-              <span v-if="props.row.status === 'pending'">Pending</span>
-            </b-table-column>
-
-            <b-table-column label="Save">
-              <button type="button" class="button is-primary" @click="submitComment(props.row)">
-                <span class="icon"><font-awesome-icon icon="save" /></span>
-                <span>Save</span>
-              </button>
-            </b-table-column>
-          </template>
+          <b-table-column field="updated_at" label="Date modified" sortable v-slot="props">
+            {{ props.row.updated_at | datetime }}
+          </b-table-column>
+
+          <b-table-column field="event.name" label="Event" sortable v-slot="props">
+            <router-link :to="{ name: 'oms.events.view', params: { id: props.row.event.url } }">
+              {{ props.row.event.name }}
+            </router-link>
+          </b-table-column>
+
+          <b-table-column field="first_name" label="Name" sortable v-slot="props">
+            <router-link :to="{ name: 'oms.members.view', params: { id: props.row.user_id } }">
+              {{ props.row.first_name }} {{ props.row.last_name }}
+            </router-link>
+          </b-table-column>
+
+          <b-table-column field="board_comment" label="Board comment" v-slot="props">
+            <textarea class="textarea" v-model="props.row.board_comment" />
+          </b-table-column>
+
+          <b-table-column field="status" label="Status" sortable v-slot="props">
+            <span v-if="props.row.status === 'accepted'">Accepted</span>
+            <span v-if="props.row.status === 'rejected'">Rejected</span>
+            <span v-if="props.row.status === 'waiting_list'">Waiting list</span>
+            <span v-if="props.row.status === 'pending'">Pending</span>
+          </b-table-column>
+
+          <b-table-column label="Save" v-slot="props">
+            <button type="button" class="button is-primary" @click="submitComment(props.row)">
+              <span class="icon"><font-awesome-icon icon="save" /></span>
+              <span>Save</span>
+            </button>
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/events/ChangeStatus.vue b/src/views/events/ChangeStatus.vue
index 0a144b0cc..2279f7a16 100644
--- a/src/views/events/ChangeStatus.vue
+++ b/src/views/events/ChangeStatus.vue
@@ -7,60 +7,58 @@
         <b-table
           :data="events"
           :loading="isLoading">
-          <template slot-scope="props">
-            <b-table-column field="type" label="Event type" sortable>
-              {{ eventTypes[props.row.type] }}
-            </b-table-column>
+          <b-table-column field="type" label="Event type" sortable v-slot="props">
+            {{ eventTypes[props.row.type] }}
+          </b-table-column>
 
-            <b-table-column field="name" label="Event name" sortable>
-              <router-link
-                :to="{ name: 'oms.events.view', params: { id: props.row.url || props.row.id } }"
-                class="has-word-break">
-                {{ props.row.name }}
-              </router-link>
-            </b-table-column>
+          <b-table-column field="name" label="Event name" sortable v-slot="props">
+            <router-link
+              :to="{ name: 'oms.events.view', params: { id: props.row.url || props.row.id } }"
+              class="has-word-break">
+              {{ props.row.name }}
+            </router-link>
+          </b-table-column>
 
-            <b-table-column field="description" label="Description">
-              <div class="content has-word-break" v-html="$options.filters.markdown(props.row.description)" />
-            </b-table-column>
+          <b-table-column field="description" label="Description" v-slot="props">
+            <div class="content has-word-break" v-html="$options.filters.markdown(props.row.description)" />
+          </b-table-column>
 
-            <b-table-column field="starts" label="Event dates" sortable>
-              {{ props.row.starts | date }} - {{ props.row.ends | date }}
-            </b-table-column>
+          <b-table-column field="starts" label="Event dates" sortable v-slot="props">
+            {{ props.row.starts | date }} - {{ props.row.ends | date }}
+          </b-table-column>
 
-            <b-table-column field="status" label="Current status" sortable>
-              {{ props.row.status | capitalize }}
-            </b-table-column>
+          <b-table-column field="status" label="Current status" sortable v-slot="props">
+            {{ props.row.status | capitalize }}
+          </b-table-column>
 
-            <b-table-column field="status" label="Change status" sortable>
-              <div class="buttons">
-                <button
-                  v-if="props.row.status === 'draft'"
-                  class="button is-small is-warning"
-                  @click="changeStatus(props.row, 'submitted')">
-                  Request approval
-                </button>
-                <button
-                  v-if="props.row.status === 'submitted'"
-                  class="button is-small is-primary"
-                  @click="changeStatus(props.row, 'published')">
-                  Publish
-                </button>
-                <button
-                  v-if="props.row.status === 'submitted'"
-                  class="button is-small is-danger"
-                  @click="changeStatus(props.row, 'draft')">
-                  Request changes
-                </button>
-                <button
-                  v-if="props.row.status === 'published'"
-                  class="button is-small is-danger"
-                  @click="changeStatus(props.row, 'submitted')">
-                  Unpublish
-                </button>
-              </div>
-            </b-table-column>
-          </template>
+          <b-table-column field="status" label="Change status" sortable v-slot="props">
+            <div class="buttons">
+              <button
+                v-if="props.row.status === 'draft'"
+                class="button is-small is-warning"
+                @click="changeStatus(props.row, 'submitted')">
+                Request approval
+              </button>
+              <button
+                v-if="props.row.status === 'submitted'"
+                class="button is-small is-primary"
+                @click="changeStatus(props.row, 'published')">
+                Publish
+              </button>
+              <button
+                v-if="props.row.status === 'submitted'"
+                class="button is-small is-danger"
+                @click="changeStatus(props.row, 'draft')">
+                Request changes
+              </button>
+              <button
+                v-if="props.row.status === 'published'"
+                class="button is-small is-danger"
+                @click="changeStatus(props.row, 'submitted')">
+                Unpublish
+              </button>
+            </div>
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/events/Edit.vue b/src/views/events/Edit.vue
index 7bd5a3a12..aadcddcd2 100644
--- a/src/views/events/Edit.vue
+++ b/src/views/events/Edit.vue
@@ -284,25 +284,23 @@
           <b-table
             :data="event.organizers"
             :loading="isLoading">
-            <template slot-scope="props">
-              <b-table-column field="first_name" label="First and last name" sortable>
-                <router-link target="_blank" rel="noopener noreferrer" :to="{ name: 'oms.members.view', params: { id: props.row.user_id } }">
-                  {{ props.row.first_name }} {{ props.row.last_name }}
-                </router-link>
-              </b-table-column>
-
-              <b-table-column field="comment" label="Comment">
-                <div class="control">
-                  <input class="input" type="text" v-model="props.row.comment" />
-                </div>
-              </b-table-column>
+            <b-table-column field="first_name" label="First and last name" sortable v-slot="props">
+              <router-link target="_blank" rel="noopener noreferrer" :to="{ name: 'oms.members.view', params: { id: props.row.user_id } }">
+                {{ props.row.first_name }} {{ props.row.last_name }}
+              </router-link>
+            </b-table-column>
 
-              <b-table-column label="Delete">
-                <button class="button is-small is-danger" v-if="!props.row.disableEdit" @click="deleteOrganizer(props.index)">
-                  Delete
-                </button>
-              </b-table-column>
-            </template>
+            <b-table-column field="comment" label="Comment" v-slot="props">
+              <div class="control">
+                <input class="input" type="text" v-model="props.row.comment" />
+              </div>
+            </b-table-column>
+
+            <b-table-column label="Delete" v-slot="props">
+              <button class="button is-small is-danger" v-if="!props.row.disableEdit" @click="deleteOrganizer(props.index)">
+                Delete
+              </button>
+            </b-table-column>
 
             <template slot="empty">
               <empty-table-stub />
diff --git a/src/views/events/Participants.vue b/src/views/events/Participants.vue
index 640bca541..889957d1c 100644
--- a/src/views/events/Participants.vue
+++ b/src/views/events/Participants.vue
@@ -17,53 +17,51 @@
           :data="applications"
           :row-class="row => calculateClassForApplication(row)"
           :loading="isLoading">
-          <template slot-scope="props">
-            <b-table-column field="user_id" label="User ID" numeric sortable>
-              {{ props.row.user_id }}
-            </b-table-column>
-
-            <b-table-column field="first_name" label="First and last name" sortable>
-              {{ props.row.first_name }} {{ props.row.last_name }}
-            </b-table-column>
-
-            <b-table-column field="body_name" label="Body">
-              <router-link :to="{ name: 'oms.bodies.view', params: { id: props.row.body_id } }">
-                {{ props.row.body_name }}
-              </router-link>
-            </b-table-column>
-
-            <b-table-column label="View">
-              <a href="#" @click.prevent="showModal(props.row.id)">View</a>
-            </b-table-column>
-
-            <b-table-column label="Manage status" field="status" centered sortable>
-              <div class="select" :class="{ 'is-loading': props.row.isSaving }">
-                <select v-model="props.row.newStatus" @change="switchPaxStatus(props.row)">
-                  <option value="pending">Pending</option>
-                  <option value="accepted">Accepted</option>
-                  <option value="rejected">Rejected</option>
-                </select>
-              </div>
-            </b-table-column>
-
-            <b-table-column label="Confirmed?" field="confirmed" centered sortable>
-              <div class="select" :class="{ 'is-loading': props.row.isSavingConfirmed }">
-                <select v-model="props.row.newConfirmed" @change="switchPaxConfirmed(props.row)" :disabled="props.row.attended">
-                  <option :value="true">Yes</option>
-                  <option :value="false">No</option>
-                </select>
-              </div>
-            </b-table-column>
-
-            <b-table-column label="Attended?" field="attended" centered sortable>
-              <div class="select" :class="{ 'is-loading': props.row.isSavingAttended }">
-                <select v-model="props.row.newAttended" @change="switchPaxAttended(props.row)" :disabled="!props.row.confirmed">
-                  <option :value="true">Yes</option>
-                  <option :value="false">No</option>
-                </select>
-              </div>
-            </b-table-column>
-          </template>
+          <b-table-column field="user_id" label="User ID" numeric sortable v-slot="props">
+            {{ props.row.user_id }}
+          </b-table-column>
+
+          <b-table-column field="first_name" label="First and last name" sortable v-slot="props">
+            {{ props.row.first_name }} {{ props.row.last_name }}
+          </b-table-column>
+
+          <b-table-column field="body_name" label="Body" v-slot="props">
+            <router-link :to="{ name: 'oms.bodies.view', params: { id: props.row.body_id } }">
+              {{ props.row.body_name }}
+            </router-link>
+          </b-table-column>
+
+          <b-table-column label="View" v-slot="props">
+            <a href="#" @click.prevent="showModal(props.row.id)">View</a>
+          </b-table-column>
+
+          <b-table-column label="Manage status" field="status" centered sortable v-slot="props">
+            <div class="select" :class="{ 'is-loading': props.row.isSaving }">
+              <select v-model="props.row.newStatus" @change="switchPaxStatus(props.row)">
+                <option value="pending">Pending</option>
+                <option value="accepted">Accepted</option>
+                <option value="rejected">Rejected</option>
+              </select>
+            </div>
+          </b-table-column>
+
+          <b-table-column label="Confirmed?" field="confirmed" centered sortable v-slot="props">
+            <div class="select" :class="{ 'is-loading': props.row.isSavingConfirmed }">
+              <select v-model="props.row.newConfirmed" @change="switchPaxConfirmed(props.row)" :disabled="props.row.attended">
+                <option :value="true">Yes</option>
+                <option :value="false">No</option>
+              </select>
+            </div>
+          </b-table-column>
+
+          <b-table-column label="Attended?" field="attended" centered sortable v-slot="props">
+            <div class="select" :class="{ 'is-loading': props.row.isSavingAttended }">
+              <select v-model="props.row.newAttended" @change="switchPaxAttended(props.row)" :disabled="!props.row.confirmed">
+                <option :value="true">Yes</option>
+                <option :value="false">No</option>
+              </select>
+            </div>
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/network/AntennaCriteriaCheck.vue b/src/views/network/AntennaCriteriaCheck.vue
index 44a1654bc..0a5652d5f 100644
--- a/src/views/network/AntennaCriteriaCheck.vue
+++ b/src/views/network/AntennaCriteriaCheck.vue
@@ -23,74 +23,71 @@
           <a class="button is-info" v-if="can.sendFulfilmentEmails" @click="openAntennaCriteriaMail()">Change fulfilment email text</a>
         </div>
         <b-table :data="filteredBodies" :loading="isLoading" narrowed>
-          <template slot-scope="props">
-            <b-table-column sortable field="name" label="Body name">
-              <router-link :to="{ name: 'oms.bodies.view', params: { id: props.row.id } }">{{ props.row.name }}</router-link>
-            </b-table-column>
-
-            <b-table-column sortable field="type" label="Type">
-              {{ props.row.type | capitalize }}
-            </b-table-column>
-
-            <b-table-column sortable field="netcom" label="NetCom">
-              {{ props.row.netcom?.first_name }}
-            </b-table-column>
-
-            <b-table-column sortable field="status" label="Status">
-              <b-tag :type="statusType(props.row)" size="is-medium">{{ statusValue(props.row) }}</b-tag>
-            </b-table-column>
-
-            <b-table-column field="communication" label="Communication (C)">
-              <b-tag :type="criterionTagType('communication', props.row)" size="is-medium">{{ criterionTagValue("communication", props.row) }}</b-tag>
-            </b-table-column>
-
-            <b-table-column field="boardElection" label="Board election (BE)">
-              <b-tag :type="criterionTagType('boardElection', props.row)" size="is-medium">{{ criterionTagValue("boardElection", props.row) }}</b-tag>
-            </b-table-column>
-
-            <b-table-column field="membersList" label="Members list (ML)">
-              <b-tag :type="criterionTagType('membersList', props.row)" size="is-medium">{{ criterionTagValue("membersList", props.row) }}</b-tag>
-            </b-table-column>
-
-            <b-table-column field="membershipFee" label="Membership fee (F)">
-              <b-tag :type="criterionTagType('membershipFee', props.row)" size="is-medium">{{ criterionTagValue("membershipFee", props.row) }}</b-tag>
-            </b-table-column>
-
-            <b-table-column field="mostRecentEvent" label="Events (E)">
-              <b-tag :type="criterionTagType('events', props.row)" size="is-medium">{{ criterionTagValue("events", props.row) }}</b-tag>
-            </b-table-column>
-
-            <b-table-column field="attendance" label="Agora attendance (AA)">
-              <b-tag :type="criterionTagType('agoraAttendance', props.row)" size="is-medium">{{ criterionTagValue("agoraAttendance", props.row) }}</b-tag>
-            </b-table-column>
-
-            <b-table-column field="development" label="Development plan (DP)">
-              <b-tag :type="criterionTagType('developmentPlan', props.row)" size="is-medium">{{ criterionTagValue("developmentPlan", props.row) }}</b-tag>
-            </b-table-column>
-
-            <b-table-column field="fulfilment" label="Fulfilment report (FR)">
-              <b-tag :type="criterionTagType('fulfilmentReport', props.row)" size="is-medium">{{ criterionTagValue("fulfilmentReport", props.row) }}</b-tag>
-            </b-table-column>
-
-            <b-table-column>
-              <b-button @click="openAntennaCriteriaInfo(props.row)" class="button is-link">
-                <span class="white"><font-awesome-icon :icon="['fa', 'eye']" /></span>
-              </b-button>
-            </b-table-column>
-
-            <b-table-column>
-              <b-button @click="openAntennaCriteriaModal(props.row)" class="button is-warning">
-                <span class="white"><font-awesome-icon :icon="['fa', 'pencil-alt']" /></span>
-              </b-button>
-            </b-table-column>
-
-            <b-table-column v-if="can.sendFulfilmentEmails">
-              <b-button @click="openAntennaCriteriaMailSend(props.row)" class="button is-danger">
-                <span class="white"><font-awesome-icon :icon="['fa', 'envelope']" /></span>
-              </b-button>
-            </b-table-column>
-
-          </template>
+          <b-table-column sortable field="name" label="Body name" v-slot="props">
+            <router-link :to="{ name: 'oms.bodies.view', params: { id: props.row.id } }">{{ props.row.name }}</router-link>
+          </b-table-column>
+
+          <b-table-column sortable field="type" label="Type" v-slot="props">
+            {{ props.row.type | capitalize }}
+          </b-table-column>
+
+          <b-table-column sortable field="netcom" label="NetCom" v-slot="props">
+            {{ props.row.netcom?.first_name }}
+          </b-table-column>
+
+          <b-table-column sortable field="status" label="Status" v-slot="props">
+            <b-tag :type="statusType(props.row)" size="is-medium">{{ statusValue(props.row) }}</b-tag>
+          </b-table-column>
+
+          <b-table-column field="communication" label="Communication (C)" v-slot="props">
+            <b-tag :type="criterionTagType('communication', props.row)" size="is-medium">{{ criterionTagValue("communication", props.row) }}</b-tag>
+          </b-table-column>
+
+          <b-table-column field="boardElection" label="Board election (BE)" v-slot="props">
+            <b-tag :type="criterionTagType('boardElection', props.row)" size="is-medium">{{ criterionTagValue("boardElection", props.row) }}</b-tag>
+          </b-table-column>
+
+          <b-table-column field="membersList" label="Members list (ML)" v-slot="props">
+            <b-tag :type="criterionTagType('membersList', props.row)" size="is-medium">{{ criterionTagValue("membersList", props.row) }}</b-tag>
+          </b-table-column>
+
+          <b-table-column field="membershipFee" label="Membership fee (F)" v-slot="props">
+            <b-tag :type="criterionTagType('membershipFee', props.row)" size="is-medium">{{ criterionTagValue("membershipFee", props.row) }}</b-tag>
+          </b-table-column>
+
+          <b-table-column field="mostRecentEvent" label="Events (E)" v-slot="props">
+            <b-tag :type="criterionTagType('events', props.row)" size="is-medium">{{ criterionTagValue("events", props.row) }}</b-tag>
+          </b-table-column>
+
+          <b-table-column field="attendance" label="Agora attendance (AA)" v-slot="props">
+            <b-tag :type="criterionTagType('agoraAttendance', props.row)" size="is-medium">{{ criterionTagValue("agoraAttendance", props.row) }}</b-tag>
+          </b-table-column>
+
+          <b-table-column field="development" label="Development plan (DP)" v-slot="props">
+            <b-tag :type="criterionTagType('developmentPlan', props.row)" size="is-medium">{{ criterionTagValue("developmentPlan", props.row) }}</b-tag>
+          </b-table-column>
+
+          <b-table-column field="fulfilment" label="Fulfilment report (FR)" v-slot="props">
+            <b-tag :type="criterionTagType('fulfilmentReport', props.row)" size="is-medium">{{ criterionTagValue("fulfilmentReport", props.row) }}</b-tag>
+          </b-table-column>
+
+          <b-table-column v-slot="props">
+            <b-button @click="openAntennaCriteriaInfo(props.row)" class="button is-link">
+              <span class="white"><font-awesome-icon :icon="['fa', 'eye']" /></span>
+            </b-button>
+          </b-table-column>
+
+          <b-table-column v-slot="props">
+            <b-button @click="openAntennaCriteriaModal(props.row)" class="button is-warning">
+              <span class="white"><font-awesome-icon :icon="['fa', 'pencil-alt']" /></span>
+            </b-button>
+          </b-table-column>
+
+          <b-table-column v-if="can.sendFulfilmentEmails" v-slot="props">
+            <b-button @click="openAntennaCriteriaMailSend(props.row)" class="button is-danger">
+              <span class="white"><font-awesome-icon :icon="['fa', 'envelope']" /></span>
+            </b-button>
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/network/BoardListing.vue b/src/views/network/BoardListing.vue
index 9785d376f..60ee0f35f 100644
--- a/src/views/network/BoardListing.vue
+++ b/src/views/network/BoardListing.vue
@@ -41,45 +41,43 @@
         </div>
 
         <b-table :data="filteredBodies" :loading="isLoading" narrowed>
-          <template slot-scope="props">
-            <b-table-column field="code" label="Body code">
-              {{ props.row.code }}
-            </b-table-column>
-
-            <b-table-column field="name" label="Body name">
-              <router-link :to="{ name: 'oms.bodies.view', params: { id: props.row.id } }">{{ props.row.name }}</router-link>
-            </b-table-column>
-
-            <b-table-column field="type" label="Type">
-              {{ props.row.type | capitalize }}
-            </b-table-column>
-
-            <b-table-column field="election" label="Election">
-              <template v-if="props.row.board">
-                {{ props.row.board.elected_date }}
-              </template>
-              <span v-else>-</span>
-            </b-table-column>
-
-            <b-table-column field="term_start" label="Term start">
-              <template v-if="props.row.board">
-                {{ props.row.board.start_date }}
-              </template>
-              <span v-else>-</span>
-            </b-table-column>
-
-            <b-table-column field="term_end" label="Term end">
-              <template v-if="props.row.board">
-                {{ props.row.board.end_date }}
-              </template>
-              <span v-else>-</span>
-            </b-table-column>
-
-            <b-table-column field="status" label="Status" v-if="includeDeleted">
-              <span class="tag is-small is-info" v-if="props.row.status === 'active'">Active</span>
-              <span class="tag is-small is-danger" v-if="props.row.status === 'deleted'">Deleted</span>
-            </b-table-column>
-          </template>
+          <b-table-column field="code" label="Body code" v-slot="props">
+            {{ props.row.code }}
+          </b-table-column>
+
+          <b-table-column field="name" label="Body name" v-slot="props">
+            <router-link :to="{ name: 'oms.bodies.view', params: { id: props.row.id } }">{{ props.row.name }}</router-link>
+          </b-table-column>
+
+          <b-table-column field="type" label="Type" v-slot="props">
+            {{ props.row.type | capitalize }}
+          </b-table-column>
+
+          <b-table-column field="election" label="Election" v-slot="props">
+            <template v-if="props.row.board">
+              {{ props.row.board.elected_date }}
+            </template>
+            <span v-else>-</span>
+          </b-table-column>
+
+          <b-table-column field="term_start" label="Term start" v-slot="props">
+            <template v-if="props.row.board">
+              {{ props.row.board.start_date }}
+            </template>
+            <span v-else>-</span>
+          </b-table-column>
+
+          <b-table-column field="term_end" label="Term end" v-slot="props">
+            <template v-if="props.row.board">
+              {{ props.row.board.end_date }}
+            </template>
+            <span v-else>-</span>
+          </b-table-column>
+
+          <b-table-column field="status" label="Status" v-if="includeDeleted" v-slot="props">
+            <span class="tag is-small is-info" v-if="props.row.status === 'active'">Active</span>
+            <span class="tag is-small is-danger" v-if="props.row.status === 'deleted'">Deleted</span>
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/statutory/Accepted.vue b/src/views/statutory/Accepted.vue
index 1e466499f..9e7c0a2d9 100644
--- a/src/views/statutory/Accepted.vue
+++ b/src/views/statutory/Accepted.vue
@@ -11,43 +11,41 @@
           :loading="isLoading"
           default-sort="statutory_id"
           default-sort-direction="desc">
-          <template slot-scope="props">
-            <b-table-column field="statutory_id" label="#" numeric>
-              {{ props.row.statutory_id }}
-            </b-table-column>
+          <b-table-column field="statutory_id" label="#" numeric v-slot="props">
+            {{ props.row.statutory_id }}
+          </b-table-column>
 
-            <b-table-column field="first_name" label="Name">
-              {{ props.row.first_name }} {{ props.row.last_name }}
-            </b-table-column>
+          <b-table-column field="first_name" label="Name" v-slot="props">
+            {{ props.row.first_name }} {{ props.row.last_name }}
+          </b-table-column>
 
-            <b-table-column field="body_name" label="Body">
-              <router-link :to="{ name: 'oms.bodies.view', params: { id: props.row.body_id } }">
-                {{ props.row.body_name }}
-              </router-link>
-            </b-table-column>
+          <b-table-column field="body_name" label="Body" v-slot="props">
+            <router-link :to="{ name: 'oms.bodies.view', params: { id: props.row.body_id } }">
+              {{ props.row.body_name }}
+            </router-link>
+          </b-table-column>
 
-            <b-table-column field="participant_type" label="Participant type and order">
-              {{ props.row.participant_type ? `${props.row.participant_type} (${props.row.participant_order})` : '' }}
-            </b-table-column>
+          <b-table-column field="participant_type" label="Participant type and order" v-slot="props">
+            {{ props.row.participant_type ? `${props.row.participant_type} (${props.row.participant_order})` : '' }}
+          </b-table-column>
 
-            <b-table-column field="confirmed" label="Confirmed?" centered>
-              <span :class="calculateClassForTag(props.row.confirmed)">
-                {{ props.row.confirmed | beautify }}
-              </span>
-            </b-table-column>
+          <b-table-column field="confirmed" label="Confirmed?" centered v-slot="props">
+            <span :class="calculateClassForTag(props.row.confirmed)">
+              {{ props.row.confirmed | beautify }}
+            </span>
+          </b-table-column>
 
-            <b-table-column field="attended" label="Attended?" centered>
-              <span :class="calculateClassForTag(props.row.attended)">
-                {{ props.row.attended | beautify }}
-              </span>
-            </b-table-column>
+          <b-table-column field="attended" label="Attended?" centered v-slot="props">
+            <span :class="calculateClassForTag(props.row.attended)">
+              {{ props.row.attended | beautify }}
+            </span>
+          </b-table-column>
 
-            <b-table-column field="registered" label="Registered?" centered>
-              <span :class="calculateClassForTag(props.row.registered)">
-                {{ props.row.registered | beautify }}
-              </span>
-            </b-table-column>
-          </template>
+          <b-table-column field="registered" label="Registered?" centered v-slot="props">
+            <span :class="calculateClassForTag(props.row.registered)">
+              {{ props.row.registered | beautify }}
+            </span>
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/statutory/Applications.vue b/src/views/statutory/Applications.vue
index 12abe0019..b81ca1779 100644
--- a/src/views/statutory/Applications.vue
+++ b/src/views/statutory/Applications.vue
@@ -54,70 +54,69 @@
           default-sort="statutory_id"
           default-sort-direction="desc"
           @sort="onSort">
-          <template slot-scope="props">
-            <b-table-column field="statutory_id" label="#" numeric sortable>
-              {{ props.row.statutory_id }}
-            </b-table-column>
+          <b-table-column field="statutory_id" label="#" numeric sortable v-slot="props">
+            {{ props.row.statutory_id }}
+          </b-table-column>
 
-            <b-table-column field="user_id" label="User ID" sortable>
-              {{ props.row.user_id }}
-            </b-table-column>
+          <b-table-column field="user_id" label="User ID" sortable v-slot="props">
+            {{ props.row.user_id }}
+          </b-table-column>
 
-            <b-table-column field="body_name" label="Body" centered sortable>
-              {{ props.row.body_name }}
-            </b-table-column>
+          <b-table-column field="body_name" label="Body" centered sortable v-slot="props">
+            {{ props.row.body_name }}
+          </b-table-column>
 
-            <b-table-column field="is_on_memberslist" label="Is on memberslist?" centered sortable :visible="event.type === 'agora'">
-              <span :class="calculateClassForMemberslist(props.row.is_on_memberslist)">
-                {{ props.row.is_on_memberslist | beautify }}
-              </span>
-            </b-table-column>
+          <b-table-column field="is_on_memberslist" label="Is on memberslist?" centered sortable :visible="event.type === 'agora'" v-slot="props">
+            <span :class="calculateClassForMemberslist(props.row.is_on_memberslist)">
+              {{ props.row.is_on_memberslist | beautify }}
+            </span>
+          </b-table-column>
 
-            <b-table-column field="was_on_memberslist" label="Was on previous memberslist?" centered sortable :visible="event.type === 'agora'">
-              <span :class="calculateClassForMemberslist(props.row.is_on_previous_memberslist)">
-                {{ props.row.is_on_previous_memberslist | beautify }}
-              </span>
-            </b-table-column>
+          <b-table-column field="was_on_memberslist" label="Was on previous memberslist?" centered sortable :visible="event.type === 'agora'" v-slot="props">
+            <span :class="calculateClassForMemberslist(props.row.is_on_previous_memberslist)">
+              {{ props.row.is_on_previous_memberslist | beautify }}
+            </span>
+          </b-table-column>
 
-            <!-- important: there should be no whitespaces/line breaks inside this tag, as it messes up the white-space: pre-wrap styling. !-->
-            <b-table-column
-              v-for="(field, index) in fields"
-              :visible="selectedFields.some(sField => sField.name === field.name)"
-              v-bind:key="index"
-              :field="field.column"
-              class="has-text-pre-wrap"
-              sortable
-              :label="field.name">{{ field.get(props.row) | beautify }}</b-table-column>
+          <!-- important: there should be no whitespaces/line breaks inside this tag, as it messes up the white-space: pre-wrap styling. !-->
+          <b-table-column
+            v-for="(field, index) in fields"
+            :visible="selectedFields.some(sField => sField.name === field.name)"
+            v-bind:key="index"
+            :field="field.column"
+            class="has-text-pre-wrap"
+            sortable
+            :label="field.name"
+            v-slot="props">{{ field.get(props.row) | beautify }}</b-table-column>
 
-            <b-table-column field="cancelled" label="Cancelled?" centered sortable :visible="displayCancelled">
-              {{ props.row.cancelled | beautify }}
-            </b-table-column>
+          <b-table-column field="cancelled" label="Cancelled?" centered sortable :visible="displayCancelled" v-slot="props">
+            {{ props.row.cancelled | beautify }}
+          </b-table-column>
 
-            <b-table-column field="confirmed" label="Confirmed?" centered sortable>
-              {{ props.row.confirmed | beautify }}
-            </b-table-column>
+          <b-table-column field="confirmed" label="Confirmed?" centered sortable v-slot="props">
+            {{ props.row.confirmed | beautify }}
+          </b-table-column>
 
-            <b-table-column field="attended" label="Attended?" centered sortable>
-              {{ props.row.attended | beautify }}
-            </b-table-column>
+          <b-table-column field="attended" label="Attended?" centered sortable v-slot="props">
+            {{ props.row.attended | beautify }}
+          </b-table-column>
 
-            <b-table-column label="View" centered>
-              <router-link :to="{ name: 'oms.statutory.applications.view', params: { id: event.url || event.id, application_id: props.row.statutory_id || props.row.id } }">
-                View
-              </router-link>
-            </b-table-column>
+          <b-table-column label="View" centered v-slot="props">
+            <router-link :to="{ name: 'oms.statutory.applications.view', params: { id: event.url || event.id, application_id: props.row.statutory_id || props.row.id } }">
+              View
+            </router-link>
+          </b-table-column>
 
-            <b-table-column label="Manage status" field="status" centered sortable>
-              <div class="select" :class="{ 'is-loading': props.row.isSaving }">
-                <select v-model="props.row.newStatus" @change="switchPaxStatus(props.row)">
-                  <option value="pending">Pending</option>
-                  <option value="accepted">Accepted</option>
-                  <option value="waiting_list">Waiting list</option>
-                  <option value="rejected">Rejected</option>
-                </select>
-              </div>
-            </b-table-column>
-          </template>
+          <b-table-column label="Manage status" field="status" centered sortable v-slot="props">
+            <div class="select" :class="{ 'is-loading': props.row.isSaving }">
+              <select v-model="props.row.newStatus" @change="switchPaxStatus(props.row)">
+                <option value="pending">Pending</option>
+                <option value="accepted">Accepted</option>
+                <option value="waiting_list">Waiting list</option>
+                <option value="rejected">Rejected</option>
+              </select>
+            </div>
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/statutory/BoardView.vue b/src/views/statutory/BoardView.vue
index 6b0d08066..6e1d000fb 100644
--- a/src/views/statutory/BoardView.vue
+++ b/src/views/statutory/BoardView.vue
@@ -64,14 +64,14 @@
             </div>
           </div>
 
-          <b-table
-            :data="bodyStatuses">
-            <template slot-scope="props">
-              <b-table-column label="Participant type and order">
+          <div>
+            <b-table
+              :data="bodyStatuses">
+              <b-table-column label="Participant type and order" v-slot="props">
                 {{ props.row.participant_type }} ({{ props.row.participant_order }})
               </b-table-column>
 
-              <b-table-column field="user_id" label="User">
+              <b-table-column field="user_id" label="User" v-slot="props">
                 <div class="select">
                   <select v-model="props.row.user_id">
                     <option :value="null">Not set</option>
@@ -82,11 +82,11 @@
                 </div>
               </b-table-column>
 
-              <b-table-column field="board_comment" label="Board comment" sortable>
+              <b-table-column field="board_comment" label="Board comment" sortable v-slot="props">
                 <textarea class="textarea" v-model="props.row.board_comment" />
               </b-table-column>
-            </template>
-          </b-table>
+            </b-table>
+          </div>
 
           <div class="notification is-warning">
             <p>Please keep in mind that if you haven't selected any application here, its participant type/order and board comment would be unset.</p>
@@ -138,48 +138,46 @@
             :loading="isLoading"
             paginated
             :per-page="limit">
-            <template slot-scope="props">
-              <b-table-column field="statutory_id" label="#" numeric>
-                {{ props.row.statutory_id }}
-              </b-table-column>
-
-              <b-table-column field="last_name" label="First and last name">
-                {{ props.row.first_name }} {{ props.row.last_name }}
-              </b-table-column>
-
-              <b-table-column label="Participant type and order">
-                <span v-if="props.row.participant_type">{{ props.row.participant_type }} ({{ props.row.participant_order }})</span>
-              </b-table-column>
-
-              <b-table-column field="is_on_memberslist" label="Is on memberslist?" centered :visible="event.type === 'agora'">
-                <span :class="calculateClassForMemberslist(props.row)">
-                  {{ props.row.is_on_memberslist | beautify }}
-                </span>
-              </b-table-column>
-
-              <b-table-column field="cancelled" label="Cancelled?" centered :visible="displayCancelled">
-                <span class="tag" :class="{ 'is-danger': props.row.cancelled }">
-                  {{ props.row.cancelled | beautify }}
-                </span>
-              </b-table-column>
-
-              <b-table-column label="View" centered>
-                <router-link :to="{ name: 'oms.statutory.applications.view', params: { id: event.url || event.id, application_id: props.row.statutory_id || props.row.id } }">
-                  View
-                </router-link>
-              </b-table-column>
-
-              <b-table-column field="status" label="Status" centered>
-                <span v-if="props.row.status === 'accepted'">Accepted</span>
-                <span v-if="props.row.status === 'rejected'">Rejected</span>
-                <span v-if="props.row.status === 'waiting_list'">Waiting list</span>
-                <span v-if="props.row.status === 'pending'">Pending</span>
-              </b-table-column>
-
-              <b-table-column v-for="(field, index) in selectedFields" v-bind:key="index" field="answers[index]" :label="field.name">
-                {{ field.get(props.row) | beautify }}
-              </b-table-column>
-            </template>
+            <b-table-column field="statutory_id" label="#" numeric v-slot="props">
+              {{ props.row.statutory_id }}
+            </b-table-column>
+
+            <b-table-column field="last_name" label="First and last name" v-slot="props">
+              {{ props.row.first_name }} {{ props.row.last_name }}
+            </b-table-column>
+
+            <b-table-column label="Participant type and order" v-slot="props">
+              <span v-if="props.row.participant_type">{{ props.row.participant_type }} ({{ props.row.participant_order }})</span>
+            </b-table-column>
+
+            <b-table-column field="is_on_memberslist" label="Is on memberslist?" centered :visible="event.type === 'agora'" v-slot="props">
+              <span :class="calculateClassForMemberslist(props.row)">
+                {{ props.row.is_on_memberslist | beautify }}
+              </span>
+            </b-table-column>
+
+            <b-table-column field="cancelled" label="Cancelled?" centered :visible="displayCancelled" v-slot="props">
+              <span class="tag" :class="{ 'is-danger': props.row.cancelled }">
+                {{ props.row.cancelled | beautify }}
+              </span>
+            </b-table-column>
+
+            <b-table-column label="View" centered v-slot="props">
+              <router-link :to="{ name: 'oms.statutory.applications.view', params: { id: event.url || event.id, application_id: props.row.statutory_id || props.row.id } }">
+                View
+              </router-link>
+            </b-table-column>
+
+            <b-table-column field="status" label="Status" centered v-slot="props">
+              <span v-if="props.row.status === 'accepted'">Accepted</span>
+              <span v-if="props.row.status === 'rejected'">Rejected</span>
+              <span v-if="props.row.status === 'waiting_list'">Waiting list</span>
+              <span v-if="props.row.status === 'pending'">Pending</span>
+            </b-table-column>
+
+            <b-table-column v-for="(field, index) in selectedFields" v-bind:key="index" field="answers[index]" :label="field.name" v-slot="props">
+              {{ field.get(props.row) | beautify }}
+            </b-table-column>
 
             <template slot="empty">
               <empty-table-stub />
diff --git a/src/views/statutory/Debug.vue b/src/views/statutory/Debug.vue
index eca5a3d83..65f06d84d 100644
--- a/src/views/statutory/Debug.vue
+++ b/src/views/statutory/Debug.vue
@@ -7,17 +7,15 @@
         <div class="subtitle">Permissions</div>
 
         <b-table :data="flattenedPermissions" :loading="isLoading">
-          <template slot-scope="props">
-            <b-table-column field="permission" label="Permission">
-              <b>{{ props.row.key }}</b>
-            </b-table-column>
+          <b-table-column field="permission" label="Permission" v-slot="props">
+            <b>{{ props.row.key }}</b>
+          </b-table-column>
 
-            <b-table-column field="value" label="Value" sortable>
-              <span :class="calculateForValue(props.row.value)">
-                {{ props.row.value | beautify }}
-              </span>
-            </b-table-column>
-          </template>
+          <b-table-column field="value" label="Value" sortable v-slot="props">
+            <span :class="calculateForValue(props.row.value)">
+              {{ props.row.value | beautify }}
+            </span>
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/statutory/DisplayMembersListModal.vue b/src/views/statutory/DisplayMembersListModal.vue
index ac583deb4..b0d03578f 100644
--- a/src/views/statutory/DisplayMembersListModal.vue
+++ b/src/views/statutory/DisplayMembersListModal.vue
@@ -6,27 +6,25 @@
     </header>
     <section class="modal-card-body">
       <b-table :data="memberslist.members">
-        <template slot-scope="props">
-          <b-table-column field="user_id" label="User ID" numeric sortable>
-            {{ props.row.user_id }}
-          </b-table-column>
-
-          <b-table-column field="first_name" label="First name" sortable>
-            {{ props.row.first_name }}
-          </b-table-column>
-
-          <b-table-column field="last_name" label="Last name" sortable>
-            {{ props.row.last_name }}
-          </b-table-column>
-
-          <b-table-column field="fee" label="Fee" numeric sortable>
-            {{ props.row.fee.toFixed(2) }} {{ memberslist.currency }}
-          </b-table-column>
-
-          <b-table-column field="fee_to_aegee" label="Fee to AEGEE-Europe" numeric sortable>
-            {{ props.row.fee_to_aegee.toFixed(2) }} EUR
-          </b-table-column>
-        </template>
+        <b-table-column field="user_id" label="User ID" numeric sortable v-slot="props">
+          {{ props.row.user_id }}
+        </b-table-column>
+
+        <b-table-column field="first_name" label="First name" sortable v-slot="props">
+          {{ props.row.first_name }}
+        </b-table-column>
+
+        <b-table-column field="last_name" label="Last name" sortable v-slot="props">
+          {{ props.row.last_name }}
+        </b-table-column>
+
+        <b-table-column field="fee" label="Fee" numeric sortable v-slot="props">
+          {{ props.row.fee.toFixed(2) }} {{ memberslist.currency }}
+        </b-table-column>
+
+        <b-table-column field="fee_to_aegee" label="Fee to AEGEE-Europe" numeric sortable v-slot="props">
+          {{ props.row.fee_to_aegee.toFixed(2) }} EUR
+        </b-table-column>
 
         <template slot="empty">
           <empty-table-stub />
diff --git a/src/views/statutory/Incoming.vue b/src/views/statutory/Incoming.vue
index 15f82db16..9be42161d 100644
--- a/src/views/statutory/Incoming.vue
+++ b/src/views/statutory/Incoming.vue
@@ -25,72 +25,70 @@
           default-sort="statutory_id"
           default-sort-direction="desc"
           @sort="onSort">
-          <template slot-scope="props">
-            <b-table-column field="statutory_id" label="#" numeric sortable>
-              {{ props.row.statutory_id }}
-            </b-table-column>
-
-            <b-table-column field="user_id" label="User ID" sortable>
-              {{ props.row.user_id }}
-            </b-table-column>
-
-            <b-table-column field="first_name" label="First name" centered sortable>
-              {{ props.row.first_name | beautify }}
-            </b-table-column>
-
-            <b-table-column field="last_name" label="Last name" centered sortable>
-              {{ props.row.last_name | beautify }}
-            </b-table-column>
-
-            <b-table-column field="email" label="Email" centered sortable>
-              {{ props.row.notification_email }}
-            </b-table-column>
-
-            <b-table-column field="body_name" label="Body" centered sortable>
-              {{ props.row.body_name }}
-            </b-table-column>
-
-            <b-table-column field="meals" label="Meals" centered sortable>
-              {{ props.row.meals }}
-            </b-table-column>
-
-            <b-table-column field="allergies" label="Allergies" centered sortable>
-              {{ props.row.allergies }}
-            </b-table-column>
-
-            <b-table-column field="confirmed" label="Confirmed?" centered sortable>
-              <div class="select" :class="{ 'is-loading': props.row.isSavingConfirmed }">
-                <select v-model="props.row.newConfirmed" @change="switchPaxConfirmed(props.row)" :disabled="props.row.attended">
-                  <option :value="true">Yes</option>
-                  <option :value="false">No</option>
-                </select>
-              </div>
-            </b-table-column>
-
-            <b-table-column field="incoming" label="Incoming form filled?" centered sortable>
-              <div class="select" :class="{ 'is-loading': props.row.isSavingIncoming }">
-                <select v-model="props.row.newIncoming" @change="switchPaxIncoming(props.row)" :disabled="props.row.attended">
-                  <option :value="true">Yes</option>
-                  <option :value="false">No</option>
-                </select>
-              </div>
-            </b-table-column>
-
-            <b-table-column field="attended" label="Attended?" centered sortable>
-              <div class="select" :class="{ 'is-loading': props.row.isSavingAttended }">
-                <select v-model="props.row.newAttended" @change="switchPaxAttended(props.row)" :disabled="!props.row.confirmed">
-                  <option :value="true">Yes</option>
-                  <option :value="false">No</option>
-                </select>
-              </div>
-            </b-table-column>
-
-            <b-table-column label="View" centered>
-              <router-link :to="{ name: 'oms.statutory.applications.view', params: { id: event.url || event.id, application_id: props.row.statutory_id || props.row.id } }">
-                View
-              </router-link>
-            </b-table-column>
-          </template>
+          <b-table-column field="statutory_id" label="#" numeric sortable v-slot="props">
+            {{ props.row.statutory_id }}
+          </b-table-column>
+
+          <b-table-column field="user_id" label="User ID" sortable v-slot="props">
+            {{ props.row.user_id }}
+          </b-table-column>
+
+          <b-table-column field="first_name" label="First name" centered sortable v-slot="props">
+            {{ props.row.first_name | beautify }}
+          </b-table-column>
+
+          <b-table-column field="last_name" label="Last name" centered sortable v-slot="props">
+            {{ props.row.last_name | beautify }}
+          </b-table-column>
+
+          <b-table-column field="email" label="Email" centered sortable v-slot="props">
+            {{ props.row.notification_email }}
+          </b-table-column>
+
+          <b-table-column field="body_name" label="Body" centered sortable v-slot="props">
+            {{ props.row.body_name }}
+          </b-table-column>
+
+          <b-table-column field="meals" label="Meals" centered sortable v-slot="props">
+            {{ props.row.meals }}
+          </b-table-column>
+
+          <b-table-column field="allergies" label="Allergies" centered sortable v-slot="props">
+            {{ props.row.allergies }}
+          </b-table-column>
+
+          <b-table-column field="confirmed" label="Confirmed?" centered sortable v-slot="props">
+            <div class="select" :class="{ 'is-loading': props.row.isSavingConfirmed }">
+              <select v-model="props.row.newConfirmed" @change="switchPaxConfirmed(props.row)" :disabled="props.row.attended">
+                <option :value="true">Yes</option>
+                <option :value="false">No</option>
+              </select>
+            </div>
+          </b-table-column>
+
+          <b-table-column field="incoming" label="Incoming form filled?" centered sortable v-slot="props">
+            <div class="select" :class="{ 'is-loading': props.row.isSavingIncoming }">
+              <select v-model="props.row.newIncoming" @change="switchPaxIncoming(props.row)" :disabled="props.row.attended">
+                <option :value="true">Yes</option>
+                <option :value="false">No</option>
+              </select>
+            </div>
+          </b-table-column>
+
+          <b-table-column field="attended" label="Attended?" centered sortable v-slot="props">
+            <div class="select" :class="{ 'is-loading': props.row.isSavingAttended }">
+              <select v-model="props.row.newAttended" @change="switchPaxAttended(props.row)" :disabled="!props.row.confirmed">
+                <option :value="true">Yes</option>
+                <option :value="false">No</option>
+              </select>
+            </div>
+          </b-table-column>
+
+          <b-table-column label="View" centered v-slot="props">
+            <router-link :to="{ name: 'oms.statutory.applications.view', params: { id: event.url || event.id, application_id: props.row.statutory_id || props.row.id } }">
+              View
+            </router-link>
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/statutory/Juridical.vue b/src/views/statutory/Juridical.vue
index 6f599419c..6a0c07163 100644
--- a/src/views/statutory/Juridical.vue
+++ b/src/views/statutory/Juridical.vue
@@ -36,53 +36,51 @@
           default-sort="statutory_id"
           default-sort-direction="desc"
           @sort="onSort">
-          <template slot-scope="props">
-            <b-table-column field="statutory_id" label="#" numeric sortable>
-              {{ props.row.statutory_id }}
-            </b-table-column>
-
-            <b-table-column field="user_id" label="User ID" sortable>
-              {{ props.row.user_id }}
-            </b-table-column>
-
-            <b-table-column field="first_name" label="First name" centered sortable>
-              {{ props.row.first_name | beautify }}
-            </b-table-column>
-
-            <b-table-column field="last_name" label="Last name" centered sortable>
-              {{ props.row.last_name | beautify }}
-            </b-table-column>
-
-            <b-table-column field="body_name" label="Body" centered sortable>
-              {{ props.row.body_name }}
-            </b-table-column>
-
-            <b-table-column field="participant_type" label="Participant type and order" centered sortable>
-              {{ props.row.participant_type && `${props.row.participant_type} (${props.row.participant_order})` }}
-            </b-table-column>
-
-            <b-table-column field="confirmed" label="Confirmed" centered sortable>
-              {{ props.row.confirmed | beautify }}
-            </b-table-column>
-
-            <b-table-column field="registered" label="JC registered?" centered sortable>
-              <div class="select" :class="{ 'is-loading': props.row.isSavingRegistered }">
-                <select v-model="props.row.newRegistered" @change="switchPaxRegistered(props.row)" :disabled="props.row.departed || !props.row.confirmed">
-                  <option :value="true">Yes</option>
-                  <option :value="false">No</option>
-                </select>
-              </div>
-            </b-table-column>
-
-            <b-table-column field="departed" label="Departed?" centered sortable>
-              <div class="select" :class="{ 'is-loading': props.row.isSavingDeparted }">
-                <select v-model="props.row.newDeparted" @change="switchPaxDeparted(props.row)" :disabled="!props.row.registered">
-                  <option :value="true">Yes</option>
-                  <option :value="false">No</option>
-                </select>
-              </div>
-            </b-table-column>
-          </template>
+          <b-table-column field="statutory_id" label="#" numeric sortable v-slot="props">
+            {{ props.row.statutory_id }}
+          </b-table-column>
+
+          <b-table-column field="user_id" label="User ID" sortable v-slot="props">
+            {{ props.row.user_id }}
+          </b-table-column>
+
+          <b-table-column field="first_name" label="First name" centered sortable v-slot="props">
+            {{ props.row.first_name | beautify }}
+          </b-table-column>
+
+          <b-table-column field="last_name" label="Last name" centered sortable v-slot="props">
+            {{ props.row.last_name | beautify }}
+          </b-table-column>
+
+          <b-table-column field="body_name" label="Body" centered sortable v-slot="props">
+            {{ props.row.body_name }}
+          </b-table-column>
+
+          <b-table-column field="participant_type" label="Participant type and order" centered sortable v-slot="props">
+            {{ props.row.participant_type && `${props.row.participant_type} (${props.row.participant_order})` }}
+          </b-table-column>
+
+          <b-table-column field="confirmed" label="Confirmed" centered sortable v-slot="props">
+            {{ props.row.confirmed | beautify }}
+          </b-table-column>
+
+          <b-table-column field="registered" label="JC registered?" centered sortable v-slot="props">
+            <div class="select" :class="{ 'is-loading': props.row.isSavingRegistered }">
+              <select v-model="props.row.newRegistered" @change="switchPaxRegistered(props.row)" :disabled="props.row.departed || !props.row.confirmed">
+                <option :value="true">Yes</option>
+                <option :value="false">No</option>
+              </select>
+            </div>
+          </b-table-column>
+
+          <b-table-column field="departed" label="Departed?" centered sortable v-slot="props">
+            <div class="select" :class="{ 'is-loading': props.row.isSavingDeparted }">
+              <select v-model="props.row.newDeparted" @change="switchPaxDeparted(props.row)" :disabled="!props.row.registered">
+                <option :value="true">Yes</option>
+                <option :value="false">No</option>
+              </select>
+            </div>
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/statutory/ListMembersLists.vue b/src/views/statutory/ListMembersLists.vue
index 819991cfb..75e76945f 100644
--- a/src/views/statutory/ListMembersLists.vue
+++ b/src/views/statutory/ListMembersLists.vue
@@ -7,45 +7,43 @@
         <b-table
           :data="memberslists"
           :loading="isLoading">
-          <template slot-scope="props">
-            <b-table-column field="body_name" label="Body name" sortable>
-              <router-link :to="{ name: 'oms.bodies.view', params: { id: props.row.body_id } }">
-                {{ props.row.body ? props.row.body.name : 'Loading...' }}
-              </router-link>
-            </b-table-column>
-
-            <b-table-column field="currency" label="Currency" sortable>
-              {{ props.row.currency }}
-            </b-table-column>
-
-            <b-table-column field="members.length" label="Members amount" numeric sortable>
-              {{ props.row.members.length }}
-            </b-table-column>
-
-            <b-table-column label="View">
-              <button class="button is-small is-primary" @click="openMembersListModal(props.row)">View memberslist</button>
-            </b-table-column>
-
-            <b-table-column field="updated_at" label="Last updated at" sortable>
-              {{ props.row.updated_at | datetime }}
-            </b-table-column>
-
-            <b-table-column field="fee_to_aegee" label="Fee to AEGEE-Europe" numeric sortable>
-              {{ props.row.fee_to_aegee.toFixed(2) }} EUR
-            </b-table-column>
-
-            <b-table-column field="fee_paid" label="Fee paid" numeric sortable>
-              {{ props.row.fee_paid.toFixed(2) }} EUR
-            </b-table-column>
-
-            <b-table-column field="fee_not_paid" label="Fee not paid" numeric sortable>
-              {{ props.row.fee_not_paid.toFixed(2) }} EUR
-            </b-table-column>
-
-            <b-table-column label="Set fee paid" sortable :visible="can.set_memberslists_fee_paid">
-              <button class="button is-small is-primary" @click="askToSetFeePaid(props.row)">Set fee paid</button>
-            </b-table-column>
-          </template>
+          <b-table-column field="body_name" label="Body name" sortable v-slot="props">
+            <router-link :to="{ name: 'oms.bodies.view', params: { id: props.row.body_id } }">
+              {{ props.row.body ? props.row.body.name : 'Loading...' }}
+            </router-link>
+          </b-table-column>
+
+          <b-table-column field="currency" label="Currency" sortable v-slot="props">
+            {{ props.row.currency }}
+          </b-table-column>
+
+          <b-table-column field="members.length" label="Members amount" numeric sortable v-slot="props">
+            {{ props.row.members.length }}
+          </b-table-column>
+
+          <b-table-column label="View" v-slot="props">
+            <button class="button is-small is-primary" @click="openMembersListModal(props.row)">View memberslist</button>
+          </b-table-column>
+
+          <b-table-column field="updated_at" label="Last updated at" sortable v-slot="props">
+            {{ props.row.updated_at | datetime }}
+          </b-table-column>
+
+          <b-table-column field="fee_to_aegee" label="Fee to AEGEE-Europe" numeric sortable v-slot="props">
+            {{ props.row.fee_to_aegee.toFixed(2) }} EUR
+          </b-table-column>
+
+          <b-table-column field="fee_paid" label="Fee paid" numeric sortable v-slot="props">
+            {{ props.row.fee_paid.toFixed(2) }} EUR
+          </b-table-column>
+
+          <b-table-column field="fee_not_paid" label="Fee not paid" numeric sortable v-slot="props">
+            {{ props.row.fee_not_paid.toFixed(2) }} EUR
+          </b-table-column>
+
+          <b-table-column label="Set fee paid" sortable :visible="can.set_memberslists_fee_paid" v-slot="props">
+            <button class="button is-small is-primary" @click="askToSetFeePaid(props.row)">Set fee paid</button>
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/statutory/ListMissingMembersLists.vue b/src/views/statutory/ListMissingMembersLists.vue
index 54f583bfd..28a96fd4e 100644
--- a/src/views/statutory/ListMissingMembersLists.vue
+++ b/src/views/statutory/ListMissingMembersLists.vue
@@ -7,17 +7,15 @@
         <b-table
           :data="memberslists"
           :loading="isLoading">
-          <template slot-scope="props">
-            <b-table-column field="body_name" label="Body name" sortable>
-              <router-link :to="{ name: 'oms.bodies.view', params: { id: props.row.body_id } }">
-                {{ props.row.body ? props.row.body.name : 'Loading...' }}
-              </router-link>
-            </b-table-column>
+          <b-table-column field="body_name" label="Body name" sortable v-slot="props">
+            <router-link :to="{ name: 'oms.bodies.view', params: { id: props.row.body_id } }">
+              {{ props.row.body ? props.row.body.name : 'Loading...' }}
+            </router-link>
+          </b-table-column>
 
-            <b-table-column field="type" label="Type" sortable>
-              {{ props.row.type | capitalize }}
-            </b-table-column>
-          </template>
+          <b-table-column field="type" label="Type" sortable v-slot="props">
+            {{ props.row.type | capitalize }}
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/statutory/NetworkListing.vue b/src/views/statutory/NetworkListing.vue
index 7df091144..eadebe3c9 100644
--- a/src/views/statutory/NetworkListing.vue
+++ b/src/views/statutory/NetworkListing.vue
@@ -27,46 +27,44 @@
           default-sort="statutory_id"
           default-sort-direction="desc"
           @sort="onSort">
-          <template slot-scope="props">
-            <b-table-column field="statutory_id" label="#" numeric sortable>
-              {{ props.row.statutory_id }}
-            </b-table-column>
-
-            <b-table-column field="user_id" label="User ID" sortable>
-              {{ props.row.user_id }}
-            </b-table-column>
-
-            <b-table-column field="first_name" label="First name" centered sortable>
-              {{ props.row.first_name | beautify }}
-            </b-table-column>
-
-            <b-table-column field="last_name" label="Last name" centered sortable>
-              {{ props.row.last_name | beautify }}
-            </b-table-column>
-
-            <b-table-column field="body_name" label="Body" centered sortable>
-              {{ props.row.body_name }}
-            </b-table-column>
-
-            <b-table-column field="participant_type" label="Participant type" centered sortable>
-              {{ props.row.participant_type | capitalize }}
-            </b-table-column>
-
-            <b-table-column field="is_on_memberslist" label="Is on memberslist?" centered sortable>
-              <span :class="calculateClassForMemberslist(props.row)">
-                {{ props.row.is_on_memberslist | beautify }}
-              </span>
-            </b-table-column>
-
-            <b-table-column label="Set memberslist status" centered sortable>
-              <div class="select" :class="{ 'is-loading': props.row.isSavingOnMemberslist }">
-                <select v-model="props.row.newIsOnMemberslist" @change="switchPaxRegistered(props.row)">
-                  <option :value="true">Is on memberslist</option>
-                  <option :value="false">Is not on memberslist</option>
-                </select>
-              </div>
-            </b-table-column>
-          </template>
+          <b-table-column field="statutory_id" label="#" numeric sortable v-slot="props">
+            {{ props.row.statutory_id }}
+          </b-table-column>
+
+          <b-table-column field="user_id" label="User ID" sortable v-slot="props">
+            {{ props.row.user_id }}
+          </b-table-column>
+
+          <b-table-column field="first_name" label="First name" centered sortable v-slot="props">
+            {{ props.row.first_name | beautify }}
+          </b-table-column>
+
+          <b-table-column field="last_name" label="Last name" centered sortable v-slot="props">
+            {{ props.row.last_name | beautify }}
+          </b-table-column>
+
+          <b-table-column field="body_name" label="Body" centered sortable v-slot="props">
+            {{ props.row.body_name }}
+          </b-table-column>
+
+          <b-table-column field="participant_type" label="Participant type" centered sortable v-slot="props">
+            {{ props.row.participant_type | capitalize }}
+          </b-table-column>
+
+          <b-table-column field="is_on_memberslist" label="Is on memberslist?" centered sortable v-slot="props">
+            <span :class="calculateClassForMemberslist(props.row)">
+              {{ props.row.is_on_memberslist | beautify }}
+            </span>
+          </b-table-column>
+
+          <b-table-column label="Set memberslist status" centered sortable v-slot="props">
+            <div class="select" :class="{ 'is-loading': props.row.isSavingOnMemberslist }">
+              <select v-model="props.row.newIsOnMemberslist" @change="switchPaxRegistered(props.row)">
+                <option :value="true">Is on memberslist</option>
+                <option :value="false">Is not on memberslist</option>
+              </select>
+            </div>
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/statutory/PlenariesList.vue b/src/views/statutory/PlenariesList.vue
index 4b4958975..7fcf20ab8 100644
--- a/src/views/statutory/PlenariesList.vue
+++ b/src/views/statutory/PlenariesList.vue
@@ -10,35 +10,33 @@
         </div>
 
         <b-table :data="plenaries" :loading="isLoading">
-          <template slot-scope="props">
-            <b-table-column field="id" label="#" numeric>
-              {{ props.row.id }}
-            </b-table-column>
+          <b-table-column field="id" label="#" numeric v-slot="props">
+            {{ props.row.id }}
+          </b-table-column>
 
-            <b-table-column field="name" label="Name">
-              {{ props.row.name }}
-            </b-table-column>
+          <b-table-column field="name" label="Name" v-slot="props">
+            {{ props.row.name }}
+          </b-table-column>
 
-            <b-table-column field="starts" label="Starts" centered>
-              {{ props.row.starts | datetimeseconds }}
-            </b-table-column>
+          <b-table-column field="starts" label="Starts" centered v-slot="props">
+            {{ props.row.starts | datetimeseconds }}
+          </b-table-column>
 
-            <b-table-column field="starts" label="Ends" centered>
-              {{ props.row.ends | datetimeseconds }}
-            </b-table-column>
+          <b-table-column field="starts" label="Ends" centered v-slot="props">
+            {{ props.row.ends | datetimeseconds }}
+          </b-table-column>
 
-            <b-table-column label="Edit" centered v-if="can.manage_plenaries">
-              <button class="button is-primary is-small" @click.prevent="openEditPlenaryModal(props.row)">Edit</button>
-            </b-table-column>
+          <b-table-column label="Edit" centered v-if="can.manage_plenaries" v-slot="props">
+            <button class="button is-primary is-small" @click.prevent="openEditPlenaryModal(props.row)">Edit</button>
+          </b-table-column>
 
-            <b-table-column label="Mark attendances" centered>
-              <router-link
-                :to="{ name: 'oms.statutory.plenaries.view', params: { id: $route.params.id, plenary_id: props.row.id } }"
-                class="button is-small">
-                View/mark attendances
-              </router-link>
-            </b-table-column>
-          </template>
+          <b-table-column label="Mark attendances" centered v-slot="props">
+            <router-link
+              :to="{ name: 'oms.statutory.plenaries.view', params: { id: $route.params.id, plenary_id: props.row.id } }"
+              class="button is-small">
+              View/mark attendances
+            </router-link>
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/statutory/PositionsList.vue b/src/views/statutory/PositionsList.vue
index b5b61dced..7aa2712fd 100644
--- a/src/views/statutory/PositionsList.vue
+++ b/src/views/statutory/PositionsList.vue
@@ -23,74 +23,72 @@
         </div>
 
         <b-table :data="positions" :loading="isLoading" :selected.sync="selectedPosition" narrowed>
-          <template slot-scope="props">
-            <b-table-column field="id" label="#" numeric>
-              {{ props.row.id }}
-            </b-table-column>
-
-            <b-table-column field="name" label="Name">
-              {{ props.row.name }}
-            </b-table-column>
-
-            <b-table-column field="starts" label="Application period starts" centered>
-              {{ props.row.starts | datetime }}
-            </b-table-column>
-
-            <b-table-column field="starts" label="Application period ends" centered>
-              {{ props.row.ends | datetime }}
-            </b-table-column>
-
-            <b-table-column field="places" label="Places available" centered numeric>
-              {{ props.row.places }}
-            </b-table-column>
-
-            <b-table-column field="places" label="Applications" centered numeric>
-              {{ props.row.candidates.length }}
-            </b-table-column>
-
-            <b-table-column field="starts" label="Status" centered>
-              <span
-                class="tag"
-                v-if="prefix !== 'all'"
-                :class="props.row.status === 'open' ? 'is-primary' : 'is-danger'">
-                {{ props.row.status }}
-              </span>
-              <div v-else class="select is-small" :class="{ 'is-loading': props.row.isSaving }">
-                <select v-model="props.row.newStatus" @change="switchPositionStatus(props.row)">
-                  <option value="open">Open</option>
-                  <option value="closed">Closed</option>
-                </select>
-              </div>
-            </b-table-column>
-
-            <b-table-column label="Edit" centered v-if="can.manage_candidates">
-              <a href="#" class="button is-primary is-small" @click.prevent="openEditPositionModal(props.row)">Edit</a>
-            </b-table-column>
-
-            <b-table-column label="Apply" centered>
-              <router-link
-                :to="{ name: 'oms.statutory.candidates.new', params: { id: $route.params.id, position_id: props.row.id } }"
-                class="button is-small"
-                v-if="props.row.status === 'open' && !props.row.myCandidate">
-                Apply!
-              </router-link>
-              <span v-if="props.row.status !== 'open' && !props.row.myCandidate">You cannot apply.</span>
-
-              <router-link
-                :to="{ name: 'oms.statutory.candidates.edit', params: { id: $route.params.id, position_id: props.row.id, candidate_id: props.row.myCandidate.id } }"
-                class="button is-small is-warning"
-                v-if="props.row.myCandidate && props.row.myCandidate.status === 'pending'">
-                Edit my application!
-              </router-link>
-              <span v-if="props.row.myCandidate && props.row.myCandidate.status !== 'pending'">You cannot edit your application.</span>
-            </b-table-column>
-
-            <b-table-column label="" centered v-if="can.manage_candidates">
-              <a href="#" class="button is-danger is-small" @click.prevent="askDeletePosition(props.row)">
-                <span class="white"><font-awesome-icon :icon="['fa', 'trash-alt']" /></span>
-              </a>
-            </b-table-column>
-          </template>
+          <b-table-column field="id" label="#" numeric v-slot="props">
+            {{ props.row.id }}
+          </b-table-column>
+
+          <b-table-column field="name" label="Name" v-slot="props">
+            {{ props.row.name }}
+          </b-table-column>
+
+          <b-table-column field="starts" label="Application period starts" centered v-slot="props">
+            {{ props.row.starts | datetime }}
+          </b-table-column>
+
+          <b-table-column field="starts" label="Application period ends" centered v-slot="props">
+            {{ props.row.ends | datetime }}
+          </b-table-column>
+
+          <b-table-column field="places" label="Places available" centered numeric v-slot="props">
+            {{ props.row.places }}
+          </b-table-column>
+
+          <b-table-column field="places" label="Applications" centered numeric v-slot="props">
+            {{ props.row.candidates.length }}
+          </b-table-column>
+
+          <b-table-column field="starts" label="Status" centered v-slot="props">
+            <span
+              class="tag"
+              v-if="prefix !== 'all'"
+              :class="props.row.status === 'open' ? 'is-primary' : 'is-danger'">
+              {{ props.row.status }}
+            </span>
+            <div v-else class="select is-small" :class="{ 'is-loading': props.row.isSaving }">
+              <select v-model="props.row.newStatus" @change="switchPositionStatus(props.row)">
+                <option value="open">Open</option>
+                <option value="closed">Closed</option>
+              </select>
+            </div>
+          </b-table-column>
+
+          <b-table-column label="Edit" centered v-if="can.manage_candidates" v-slot="props">
+            <a href="#" class="button is-primary is-small" @click.prevent="openEditPositionModal(props.row)">Edit</a>
+          </b-table-column>
+
+          <b-table-column label="Apply" centered v-slot="props">
+            <router-link
+              :to="{ name: 'oms.statutory.candidates.new', params: { id: $route.params.id, position_id: props.row.id } }"
+              class="button is-small"
+              v-if="props.row.status === 'open' && !props.row.myCandidate">
+              Apply!
+            </router-link>
+            <span v-if="props.row.status !== 'open' && !props.row.myCandidate">You cannot apply.</span>
+
+            <router-link
+              :to="{ name: 'oms.statutory.candidates.edit', params: { id: $route.params.id, position_id: props.row.id, candidate_id: props.row.myCandidate.id } }"
+              class="button is-small is-warning"
+              v-if="props.row.myCandidate && props.row.myCandidate.status === 'pending'">
+              Edit my application!
+            </router-link>
+            <span v-if="props.row.myCandidate && props.row.myCandidate.status !== 'pending'">You cannot edit your application.</span>
+          </b-table-column>
+
+          <b-table-column label="" centered v-if="can.manage_candidates" v-slot="props">
+            <a href="#" class="button is-danger is-small" @click.prevent="askDeletePosition(props.row)">
+              <span class="white"><font-awesome-icon :icon="['fa', 'trash-alt']" /></span>
+            </a>
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
@@ -114,57 +112,55 @@
         <div class="subtitle" v-if="selectedPosition">Applications for selected position</div>
 
         <b-table :data.sync="selectedPosition.candidates" v-if="selectedPosition" narrowed>
-          <template slot-scope="props">
-            <b-table-column field="id" label="#" numeric>
-              {{ props.row.id }}
-            </b-table-column>
-
-            <b-table-column field="first_name" label="First name">
-              {{ props.row.first_name }}
-            </b-table-column>
-
-            <b-table-column field="last_name" label="Last name">
-              {{ props.row.last_name }}
-            </b-table-column>
-
-            <b-table-column field="body_name" label="Body">
-              {{ props.row.body_name }}
-            </b-table-column>
-
-            <b-table-column field="created_at" label="Applied on">
-              {{ props.row.created_at | datetimeseconds }}
-            </b-table-column>
-
-            <b-table-column field="email" label="Email" :visible="prefix === 'all'">
-              {{ props.row.notification_email }}
-            </b-table-column>
-
-            <b-table-column label="View">
-              <a
-                v-if="props.row.status === 'approved' || prefix === 'all'"
-                href="#"
-                @click.prevent="openViewCandidateModal(props.row, selectedPosition)">
-                View
-              </a>
-            </b-table-column>
-
-            <b-table-column label="Edit" :visible="prefix === 'all'">
-              <router-link
-                :to="{ name: 'oms.statutory.candidates.edit', params: { id: $route.params.id, position_id: selectedPosition.id, candidate_id: props.row.id } }">
-                Edit
-              </router-link>
-            </b-table-column>
-
-            <b-table-column label="Update status" :visible="prefix === 'all'">
-              <div class="select is-small" :class="{ 'is-loading': props.row.isSaving }">
-                <select v-model="props.row.newStatus" @change="switchCandidateStatus(props.row, selectedPosition)">
-                  <option value="pending">Pending</option>
-                  <option value="approved">Approved</option>
-                  <option value="rejected">Rejected</option>
-                </select>
-              </div>
-            </b-table-column>
-          </template>
+          <b-table-column field="id" label="#" numeric v-slot="props">
+            {{ props.row.id }}
+          </b-table-column>
+
+          <b-table-column field="first_name" label="First name" v-slot="props">
+            {{ props.row.first_name }}
+          </b-table-column>
+
+          <b-table-column field="last_name" label="Last name" v-slot="props">
+            {{ props.row.last_name }}
+          </b-table-column>
+
+          <b-table-column field="body_name" label="Body" v-slot="props">
+            {{ props.row.body_name }}
+          </b-table-column>
+
+          <b-table-column field="created_at" label="Applied on" v-slot="props">
+            {{ props.row.created_at | datetimeseconds }}
+          </b-table-column>
+
+          <b-table-column field="email" label="Email" :visible="prefix === 'all'" v-slot="props">
+            {{ props.row.notification_email }}
+          </b-table-column>
+
+          <b-table-column label="View" v-slot="props">
+            <a
+              v-if="props.row.status === 'approved' || prefix === 'all'"
+              href="#"
+              @click.prevent="openViewCandidateModal(props.row, selectedPosition)">
+              View
+            </a>
+          </b-table-column>
+
+          <b-table-column label="Edit" :visible="prefix === 'all'" v-slot="props">
+            <router-link
+              :to="{ name: 'oms.statutory.candidates.edit', params: { id: $route.params.id, position_id: selectedPosition.id, candidate_id: props.row.id } }">
+              Edit
+            </router-link>
+          </b-table-column>
+
+          <b-table-column label="Update status" :visible="prefix === 'all'" v-slot="props">
+            <div class="select is-small" :class="{ 'is-loading': props.row.isSaving }">
+              <select v-model="props.row.newStatus" @change="switchCandidateStatus(props.row, selectedPosition)">
+                <option value="pending">Pending</option>
+                <option value="approved">Approved</option>
+                <option value="rejected">Rejected</option>
+              </select>
+            </div>
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/statutory/QuestionLinesList.vue b/src/views/statutory/QuestionLinesList.vue
index b8171d9bd..ca428d79c 100644
--- a/src/views/statutory/QuestionLinesList.vue
+++ b/src/views/statutory/QuestionLinesList.vue
@@ -55,53 +55,51 @@
         </div>
 
         <b-table :data="questionLines" :loading="isLoading" :selected.sync="selectedQuestionLine" narrowed>
-          <template slot-scope="props">
-            <b-table-column field="id" label="#" numeric>
-              {{ props.index + 1 }}
-            </b-table-column>
+          <b-table-column field="id" label="#" numeric v-slot="props">
+            {{ props.index + 1 }}
+          </b-table-column>
 
-            <b-table-column field="name" label="Name">
-              {{ props.row.name }}
-            </b-table-column>
+          <b-table-column field="name" label="Name" v-slot="props">
+            {{ props.row.name }}
+          </b-table-column>
 
-            <b-table-column label="Questions" numeric>
-              {{ props.row.questions.length }}
-            </b-table-column>
+          <b-table-column label="Questions" numeric v-slot="props">
+            {{ props.row.questions.length }}
+          </b-table-column>
 
-            <b-table-column field="starts" label="Status" centered>
-              <span
-                class="tag"
-                v-if="!can.manage_question_lines"
-                :class="props.row.status === 'open' ? 'is-primary' : 'is-danger'">
-                {{ props.row.status }}
-              </span>
-              <div v-else class="select is-small" :class="{ 'is-loading': props.row.isSaving }">
-                <select v-model="props.row.newStatus" @change="switchQuestionLineStatus(props.row)">
-                  <option value="open">Open</option>
-                  <option value="closed">Closed</option>
-                </select>
-              </div>
-            </b-table-column>
+          <b-table-column field="starts" label="Status" centered v-slot="props">
+            <span
+              class="tag"
+              v-if="!can.manage_question_lines"
+              :class="props.row.status === 'open' ? 'is-primary' : 'is-danger'">
+              {{ props.row.status }}
+            </span>
+            <div v-else class="select is-small" :class="{ 'is-loading': props.row.isSaving }">
+              <select v-model="props.row.newStatus" @change="switchQuestionLineStatus(props.row)">
+                <option value="open">Open</option>
+                <option value="closed">Closed</option>
+              </select>
+            </div>
+          </b-table-column>
 
-            <b-table-column label="Edit" centered v-if="can.manage_question_lines">
-              <a href="#" class="button is-warning is-small" @click.prevent="openEditQuestionLineModal(props.row)">Edit</a>
-            </b-table-column>
+          <b-table-column label="Edit" centered v-if="can.manage_question_lines" v-slot="props">
+            <a href="#" class="button is-warning is-small" @click.prevent="openEditQuestionLineModal(props.row)">Edit</a>
+          </b-table-column>
 
-            <b-table-column label="Delete" centered v-if="can.manage_question_lines">
-              <a href="#" class="button is-danger is-small" @click.prevent="askDeleteQuestionLine(props.row, props.index)">Delete</a>
-            </b-table-column>
+          <b-table-column label="Delete" centered v-if="can.manage_question_lines" v-slot="props">
+            <a href="#" class="button is-danger is-small" @click.prevent="askDeleteQuestionLine(props.row, props.index)">Delete</a>
+          </b-table-column>
 
-            <b-table-column label="Ask a question" centered>
-              <button
-                class="button is-small"
-                v-if="can.submit_questions && props.row.status === 'open'"
-                @click="openCreateQuestionModal(props.row)">
-                Ask a question!
-              </button>
-              <span v-else-if=" props.row.status !== 'open'">The question line is closed.</span>
-              <span v-else>You are not a confirmed participant.</span>
-            </b-table-column>
-          </template>
+          <b-table-column label="Ask a question" centered v-slot="props">
+            <button
+              class="button is-small"
+              v-if="can.submit_questions && props.row.status === 'open'"
+              @click="openCreateQuestionModal(props.row)">
+              Ask a question!
+            </button>
+            <span v-else-if=" props.row.status !== 'open'">The question line is closed.</span>
+            <span v-else>You are not a confirmed participant.</span>
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
@@ -113,44 +111,42 @@
         <div class="subtitle" v-if="selectedQuestionLine">Question for selected question line</div>
 
         <b-table :data.sync="selectedQuestionLine.questions" v-if="selectedQuestionLine" narrowed>
-          <template slot-scope="props">
-            <b-table-column label="#">
-              {{ props.index + 1 }}
-            </b-table-column>
+          <b-table-column label="#" v-slot="props">
+            {{ props.index + 1 }}
+          </b-table-column>
 
-            <b-table-column field="participant" label="Participant">
-              {{ props.row.application.first_name }} {{ props.row.application.last_name }}, {{ props.row.application.body_name }}
-            </b-table-column>
+          <b-table-column field="participant" label="Participant" v-slot="props">
+            {{ props.row.application.first_name }} {{ props.row.application.last_name }}, {{ props.row.application.body_name }}
+          </b-table-column>
 
-            <b-table-column :visible="can.manage_question_lines" field="paricipant_type" label="Participant type">
-              {{ props.row.application.participant_type }}
-            </b-table-column>
+          <b-table-column :visible="can.manage_question_lines" field="paricipant_type" label="Participant type" v-slot="props">
+            {{ props.row.application.participant_type }}
+          </b-table-column>
 
-            <b-table-column field="text" label="Text">
-              {{ props.row.text }}
-            </b-table-column>
+          <b-table-column field="text" label="Text" v-slot="props">
+            {{ props.row.text }}
+          </b-table-column>
 
-            <b-table-column field="updated_at" label="Last updated on">
-              {{ props.row.updated_at | datetime }}
-            </b-table-column>
+          <b-table-column field="updated_at" label="Last updated on" v-slot="props">
+            {{ props.row.updated_at | datetime }}
+          </b-table-column>
 
-            <b-table-column label="">
-              <button
-                class="button is-small is-warning"
-                v-show="(loginUser.id === props.row.application.user_id && selectedQuestionLine.status === 'open') || can.manage_question_lines"
-                @click="openEditQuestionModal(selectedQuestionLine, props.row)">
-                Edit
-              </button>
-            </b-table-column>
-            <b-table-column label=" ">
-              <button
-                class="button is-small is-danger"
-                v-show="loginUser.id === props.row.application.id || can.manage_question_lines"
-                @click="askDeleteQuestion(selectedQuestionLine, props.row, props.index)">
-                Delete
-              </button>
-            </b-table-column>
-          </template>
+          <b-table-column label="" v-slot="props">
+            <button
+              class="button is-small is-warning"
+              v-show="(loginUser.id === props.row.application.user_id && selectedQuestionLine.status === 'open') || can.manage_question_lines"
+              @click="openEditQuestionModal(selectedQuestionLine, props.row)">
+              Edit
+            </button>
+          </b-table-column>
+          <b-table-column label=" " v-slot="props">
+            <button
+              class="button is-small is-danger"
+              v-show="loginUser.id === props.row.application.id || can.manage_question_lines"
+              @click="askDeleteQuestion(selectedQuestionLine, props.row, props.index)">
+              Delete
+            </button>
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/statutory/TasksList.vue b/src/views/statutory/TasksList.vue
index c22311cb0..b34fcbf25 100644
--- a/src/views/statutory/TasksList.vue
+++ b/src/views/statutory/TasksList.vue
@@ -5,27 +5,25 @@
         <div class="title">Statutory background tasks</div>
 
         <b-table :data="tasks" :loading="isLoading">
-          <template slot-scope="props">
-            <b-table-column field="id" label="ID">
-              {{ props.row.id }}
-            </b-table-column>
+          <b-table-column field="id" label="ID" v-slot="props">
+            {{ props.row.id }}
+          </b-table-column>
 
-            <b-table-column field="key" label="key">
-              {{ props.row.key }}
-            </b-table-column>
+          <b-table-column field="key" label="key" v-slot="props">
+            {{ props.row.key }}
+          </b-table-column>
 
-            <b-table-column field="description" label="description">
-              {{ props.row.description }}
-            </b-table-column>
+          <b-table-column field="description" label="description" v-slot="props">
+            {{ props.row.description }}
+          </b-table-column>
 
-            <b-table-column field="params" label="params">
-              <span class="has-text-pre-wrap">{{ JSON.stringify(props.row.params) }}</span>
-            </b-table-column>
+          <b-table-column field="params" label="params" v-slot="props">
+            <span class="has-text-pre-wrap">{{ JSON.stringify(props.row.params) }}</span>
+          </b-table-column>
 
-            <b-table-column field="time" label="time">
-              {{ props.row.time | datetimeseconds }}
-            </b-table-column>
-          </template>
+          <b-table-column field="time" label="time" v-slot="props">
+            {{ props.row.time | datetimeseconds }}
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/statutory/ViewPlenary.vue b/src/views/statutory/ViewPlenary.vue
index f9f851f5f..73daabf41 100644
--- a/src/views/statutory/ViewPlenary.vue
+++ b/src/views/statutory/ViewPlenary.vue
@@ -27,31 +27,29 @@
         </form>
 
         <b-table :data="plenary.attendances" :loading="isLoading">
-          <template slot-scope="props">
-            <b-table-column field="id" label="#" numeric>
-              {{ props.row.id }}
-            </b-table-column>
-
-            <b-table-column field="application.id" label="Application ID" numeric centered>
-              {{ props.row.application.id }}
-            </b-table-column>
-
-            <b-table-column field="application.first_name" label="First/last name" centered>
-              {{ props.row.application.first_name }} {{ props.row.application.last_name }}
-            </b-table-column>
-
-            <b-table-column field="application.body_name" label="Body" centered>
-              {{ props.row.application.body_name }}
-            </b-table-column>
-
-            <b-table-column field="starts" label="Starts" centered>
-              {{ props.row.starts | datetimeseconds }}
-            </b-table-column>
-
-            <b-table-column field="starts" label="Ends" centered>
-              <span v-if="props.row.ends">{{ props.row.ends | datetimeseconds }}</span>
-            </b-table-column>
-          </template>
+          <b-table-column field="id" label="#" numeric v-slot="props">
+            {{ props.row.id }}
+          </b-table-column>
+
+          <b-table-column field="application.id" label="Application ID" numeric centered v-slot="props">
+            {{ props.row.application.id }}
+          </b-table-column>
+
+          <b-table-column field="application.first_name" label="First/last name" centered v-slot="props">
+            {{ props.row.application.first_name }} {{ props.row.application.last_name }}
+          </b-table-column>
+
+          <b-table-column field="application.body_name" label="Body" centered v-slot="props">
+            {{ props.row.application.body_name }}
+          </b-table-column>
+
+          <b-table-column field="starts" label="Starts" centered v-slot="props">
+            {{ props.row.starts | datetimeseconds }}
+          </b-table-column>
+
+          <b-table-column field="starts" label="Ends" centered v-slot="props">
+            <span v-if="props.row.ends">{{ props.row.ends | datetimeseconds }}</span>
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/summeruniversity/BoardView.vue b/src/views/summeruniversity/BoardView.vue
index 194f8236f..532bd57bb 100644
--- a/src/views/summeruniversity/BoardView.vue
+++ b/src/views/summeruniversity/BoardView.vue
@@ -35,47 +35,45 @@
           default-sort="updated_at"
           default-sort-direction="desc"
           v-if="selectedBody && boardBodies.length > 0">
-          <template slot-scope="props">
-            <b-table-column field="updated_at" label="Date modified" sortable>
-              {{ props.row.updated_at | datetime }}
-            </b-table-column>
-
-            <b-table-column field="event.name" label="Event" sortable>
-              <router-link :to="{ name: 'oms.summeruniversity.view', params: { id: props.row.event.url } }">
-                {{ props.row.event.name }}
-              </router-link>
-            </b-table-column>
-
-            <b-table-column field="first_name" label="Name" sortable>
-              <router-link :to="{ name: 'oms.members.view', params: { id: props.row.user_id } }">
-                {{ props.row.first_name }} {{ props.row.last_name }}
-              </router-link>
-            </b-table-column>
-
-            <b-table-column label="View applications">
-              <button type="button" class="button" @click="showModal(props.row)">
-                View application
-              </button>
-            </b-table-column>
-
-            <b-table-column field="status" label="Status" sortable>
-              <span v-if="props.row.status === 'accepted'">Accepted</span>
-              <span v-if="props.row.status === 'rejected'">Rejected</span>
-              <span v-if="props.row.status === 'waiting_list'">Waiting list</span>
-              <span v-if="props.row.status === 'pending'">Pending</span>
-            </b-table-column>
-
-            <b-table-column field="board_comment" label="Board comment">
-              <textarea class="textarea" v-model="props.row.board_comment" />
-            </b-table-column>
-
-            <b-table-column label="Save">
-              <button type="button" class="button is-primary" @click="submitComment(props.row)">
-                <span class="icon"><font-awesome-icon icon="save" /></span>
-                <span>Save</span>
-              </button>
-            </b-table-column>
-          </template>
+          <b-table-column field="updated_at" label="Date modified" sortable v-slot="props">
+            {{ props.row.updated_at | datetime }}
+          </b-table-column>
+
+          <b-table-column field="event.name" label="Event" sortable v-slot="props">
+            <router-link :to="{ name: 'oms.summeruniversity.view', params: { id: props.row.event.url } }">
+              {{ props.row.event.name }}
+            </router-link>
+          </b-table-column>
+
+          <b-table-column field="first_name" label="Name" sortable v-slot="props">
+            <router-link :to="{ name: 'oms.members.view', params: { id: props.row.user_id } }">
+              {{ props.row.first_name }} {{ props.row.last_name }}
+            </router-link>
+          </b-table-column>
+
+          <b-table-column label="View applications" v-slot="props">
+            <button type="button" class="button" @click="showModal(props.row)">
+              View application
+            </button>
+          </b-table-column>
+
+          <b-table-column field="status" label="Status" sortable v-slot="props">
+            <span v-if="props.row.status === 'accepted'">Accepted</span>
+            <span v-if="props.row.status === 'rejected'">Rejected</span>
+            <span v-if="props.row.status === 'waiting_list'">Waiting list</span>
+            <span v-if="props.row.status === 'pending'">Pending</span>
+          </b-table-column>
+
+          <b-table-column field="board_comment" label="Board comment" v-slot="props">
+            <textarea class="textarea" v-model="props.row.board_comment" />
+          </b-table-column>
+
+          <b-table-column label="Save" v-slot="props">
+            <button type="button" class="button is-primary" @click="submitComment(props.row)">
+              <span class="icon"><font-awesome-icon icon="save" /></span>
+              <span>Save</span>
+            </button>
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/summeruniversity/ChangeStatus.vue b/src/views/summeruniversity/ChangeStatus.vue
index 29588b7be..f561647df 100644
--- a/src/views/summeruniversity/ChangeStatus.vue
+++ b/src/views/summeruniversity/ChangeStatus.vue
@@ -7,155 +7,153 @@
         <b-table
           :data="events"
           :loading="isLoading">
-          <template slot-scope="props">
-            <b-table-column field="type" label="Event type" sortable>
-              {{ eventTypes[props.row.type] }}
-            </b-table-column>
-
-            <b-table-column field="name" label="Event name" sortable>
-              <router-link
-                :to="{ name: 'oms.summeruniversity.view', params: { id: props.row.url || props.row.id } }"
-                class="has-word-break">
-                {{ props.row.name }}
-              </router-link>
-            </b-table-column>
-
-            <b-table-column field="organizing_bodies" label="Organizing bodies">
-              <ul>
-                <li v-for="body in props.row.organizing_bodies" v-bind:key="body._id">
-                  <router-link class="tag" :to="{ name: 'oms.bodies.view', params: { id: body.body_id } }">
-                    {{ body.body_name }}
-                  </router-link>
-                </li>
-              </ul>
-            </b-table-column>
-
-            <b-table-column field="starts" label="Event dates" sortable>
-              {{ props.row.starts | date }} - {{ props.row.ends | date }}
-            </b-table-column>
-
-            <b-table-column field="status" label="Current status" sortable>
-              {{ props.row.status | capitalize }}
-            </b-table-column>
-
-            <b-table-column field="published" label="Current publication" sortable>
-              {{ props.row.published | capitalize }}
-            </b-table-column>
-
-            <b-table-column field="application_status" label="Current application status" sortable>
-              {{ props.row.application_status | capitalize }}
-            </b-table-column>
-
-            <b-table-column field="status" label="Change status" sortable>
-              <div class="buttons">
-                <button
-                  v-if="props.row.status === 'first draft'"
-                  class="button is-small is-warning"
-                  @click="changeStatus(props.row, 'first submission')">
-                  Submit first draft
-                </button>
-                <button
-                  v-if="props.row.status === 'first approval'"
-                  class="button is-small is-warning"
-                  @click="changeStatus(props.row, 'second submission')">
-                  Submit second draft
-                </button>
-                <button
-                  v-if="props.row.status === 'second draft'"
-                  class="button is-small is-warning"
-                  @click="changeStatus(props.row, 'second submission')">
-                  Submit second draft
-                </button>
-                <button
-                  v-if="props.row.status === 'second approval'"
-                  class="button is-small is-warning"
-                  @click="changeStatus(props.row, 'covid submission')">
-                  Submit covid draft
-                </button>
-                <button
-                  v-if="props.row.status === 'covid draft'"
-                  class="button is-small is-warning"
-                  @click="changeStatus(props.row, 'covid submission')">
-                  Submit covid draft
-                </button>
-                <button
-                  v-if="props.row.status === 'first submission'"
-                  class="button is-small is-primary"
-                  @click="changeStatus(props.row, 'first approval')">
-                  Approve first submission
-                </button>
-                <button
-                  v-if="props.row.status === 'second submission'"
-                  class="button is-small is-primary"
-                  @click="changeStatus(props.row, 'second approval')">
-                  Approve second submission
-                </button>
-                <button
-                  v-if="props.row.status === 'covid submission'"
-                  class="button is-small is-primary"
-                  @click="changeStatus(props.row, 'covid approval')">
-                  Approve covid submission
-                </button>
-                <button
-                  v-if="props.row.status === 'first submission'"
-                  class="button is-small is-danger"
-                  @click="changeStatus(props.row, 'first draft')">
-                  Reject first submission
-                </button>
-                <button
-                  v-if="props.row.status === 'second submission'"
-                  class="button is-small is-danger"
-                  @click="changeStatus(props.row, 'second draft')">
-                  Reject second submission
-                </button>
-                <button
-                  v-if="props.row.status === 'covid submission'"
-                  class="button is-small is-danger"
-                  @click="changeStatus(props.row, 'covid draft')">
-                  Reject covid submission
-                </button>
-              </div>
-            </b-table-column>
-
-            <b-table-column field="published" label="Change publication" sortable>
-              <div class="buttons">
-                <button
-                  v-if="props.row.published === 'none'"
-                  class="button is-small is-info"
-                  @click="changePublication(props.row, 'minimal')">
-                  Publish minimal event
-                </button>
-                <button
-                  v-if="props.row.published === 'minimal'"
-                  class="button is-small is-info"
-                  @click="changePublication(props.row, 'full')">
-                  Publish full event
-                </button>
-                <button
-                  v-if="props.row.published === 'full'"
-                  class="button is-small is-info"
-                  @click="changePublication(props.row, 'covid')">
-                  Publish covid event
-                </button>
-                <button
-                  v-if="props.row.published !== 'none'"
-                  class="button is-small is-danger"
-                  @click="changePublication(props.row, 'none')">
-                  Unpublish event
-                </button>
-              </div>
-            </b-table-column>
-
-            <b-table-column field="application_status" label="Change application deadline" sortable>
-              <div class="buttons">
-                <button
-                  class="button is-small is-info"
-                  @click="askChangeApplicationPeriod(props.row)">
-                  Change application deadline
-                </button>
-              </div>
-            </b-table-column>
-          </template>
+          <b-table-column field="type" label="Event type" sortable v-slot="props">
+            {{ eventTypes[props.row.type] }}
+          </b-table-column>
+
+          <b-table-column field="name" label="Event name" sortable v-slot="props">
+            <router-link
+              :to="{ name: 'oms.summeruniversity.view', params: { id: props.row.url || props.row.id } }"
+              class="has-word-break">
+              {{ props.row.name }}
+            </router-link>
+          </b-table-column>
+
+          <b-table-column field="organizing_bodies" label="Organizing bodies" v-slot="props">
+            <ul>
+              <li v-for="body in props.row.organizing_bodies" v-bind:key="body._id">
+                <router-link class="tag" :to="{ name: 'oms.bodies.view', params: { id: body.body_id } }">
+                  {{ body.body_name }}
+                </router-link>
+              </li>
+            </ul>
+          </b-table-column>
+
+          <b-table-column field="starts" label="Event dates" sortable v-slot="props">
+            {{ props.row.starts | date }} - {{ props.row.ends | date }}
+          </b-table-column>
+
+          <b-table-column field="status" label="Current status" sortable v-slot="props">
+            {{ props.row.status | capitalize }}
+          </b-table-column>
+
+          <b-table-column field="published" label="Current publication" sortable v-slot="props">
+            {{ props.row.published | capitalize }}
+          </b-table-column>
+
+          <b-table-column field="application_status" label="Current application status" sortable v-slot="props">
+            {{ props.row.application_status | capitalize }}
+          </b-table-column>
+
+          <b-table-column field="status" label="Change status" sortable v-slot="props">
+            <div class="buttons">
+              <button
+                v-if="props.row.status === 'first draft'"
+                class="button is-small is-warning"
+                @click="changeStatus(props.row, 'first submission')">
+                Submit first draft
+              </button>
+              <button
+                v-if="props.row.status === 'first approval'"
+                class="button is-small is-warning"
+                @click="changeStatus(props.row, 'second submission')">
+                Submit second draft
+              </button>
+              <button
+                v-if="props.row.status === 'second draft'"
+                class="button is-small is-warning"
+                @click="changeStatus(props.row, 'second submission')">
+                Submit second draft
+              </button>
+              <button
+                v-if="props.row.status === 'second approval'"
+                class="button is-small is-warning"
+                @click="changeStatus(props.row, 'covid submission')">
+                Submit covid draft
+              </button>
+              <button
+                v-if="props.row.status === 'covid draft'"
+                class="button is-small is-warning"
+                @click="changeStatus(props.row, 'covid submission')">
+                Submit covid draft
+              </button>
+              <button
+                v-if="props.row.status === 'first submission'"
+                class="button is-small is-primary"
+                @click="changeStatus(props.row, 'first approval')">
+                Approve first submission
+              </button>
+              <button
+                v-if="props.row.status === 'second submission'"
+                class="button is-small is-primary"
+                @click="changeStatus(props.row, 'second approval')">
+                Approve second submission
+              </button>
+              <button
+                v-if="props.row.status === 'covid submission'"
+                class="button is-small is-primary"
+                @click="changeStatus(props.row, 'covid approval')">
+                Approve covid submission
+              </button>
+              <button
+                v-if="props.row.status === 'first submission'"
+                class="button is-small is-danger"
+                @click="changeStatus(props.row, 'first draft')">
+                Reject first submission
+              </button>
+              <button
+                v-if="props.row.status === 'second submission'"
+                class="button is-small is-danger"
+                @click="changeStatus(props.row, 'second draft')">
+                Reject second submission
+              </button>
+              <button
+                v-if="props.row.status === 'covid submission'"
+                class="button is-small is-danger"
+                @click="changeStatus(props.row, 'covid draft')">
+                Reject covid submission
+              </button>
+            </div>
+          </b-table-column>
+
+          <b-table-column field="published" label="Change publication" sortable v-slot="props">
+            <div class="buttons">
+              <button
+                v-if="props.row.published === 'none'"
+                class="button is-small is-info"
+                @click="changePublication(props.row, 'minimal')">
+                Publish minimal event
+              </button>
+              <button
+                v-if="props.row.published === 'minimal'"
+                class="button is-small is-info"
+                @click="changePublication(props.row, 'full')">
+                Publish full event
+              </button>
+              <button
+                v-if="props.row.published === 'full'"
+                class="button is-small is-info"
+                @click="changePublication(props.row, 'covid')">
+                Publish covid event
+              </button>
+              <button
+                v-if="props.row.published !== 'none'"
+                class="button is-small is-danger"
+                @click="changePublication(props.row, 'none')">
+                Unpublish event
+              </button>
+            </div>
+          </b-table-column>
+
+          <b-table-column field="application_status" label="Change application deadline" sortable v-slot="props">
+            <div class="buttons">
+              <button
+                class="button is-small is-info"
+                @click="askChangeApplicationPeriod(props.row)">
+                Change application deadline
+              </button>
+            </div>
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />
diff --git a/src/views/summeruniversity/Edit.vue b/src/views/summeruniversity/Edit.vue
index 853fae5b6..1afa415c5 100644
--- a/src/views/summeruniversity/Edit.vue
+++ b/src/views/summeruniversity/Edit.vue
@@ -481,27 +481,25 @@
           <b-table
             :data="event.organizers"
             :loading="isLoading">
-            <template slot-scope="props">
-              <b-table-column field="first_name" label="First and last name" sortable>
-                <router-link target="_blank" rel="noopener noreferrer" :to="{ name: 'oms.members.view', params: { id: props.row.user_id } }">
-                  {{ props.row.first_name }} {{ props.row.last_name }}
-                </router-link>
-              </b-table-column>
-
-              <b-table-column field="role" label="Role">
-                <div class="select">
-                  <select v-model="props.row.role">
-                    <option v-for="(name, role) in roles" v-bind:key="role" v-bind:value="role">{{ name }}</option>
-                  </select>
-                </div>
-              </b-table-column>
+            <b-table-column field="first_name" label="First and last name" sortable v-slot="props">
+              <router-link target="_blank" rel="noopener noreferrer" :to="{ name: 'oms.members.view', params: { id: props.row.user_id } }">
+                {{ props.row.first_name }} {{ props.row.last_name }}
+              </router-link>
+            </b-table-column>
+
+            <b-table-column field="role" label="Role" v-slot="props">
+              <div class="select">
+                <select v-model="props.row.role">
+                  <option v-for="(name, role) in roles" v-bind:key="role" v-bind:value="role">{{ name }}</option>
+                </select>
+              </div>
+            </b-table-column>
 
-              <b-table-column label="Delete">
-                <button class="button is-small is-danger" v-if="!props.row.disableEdit" @click="deleteOrganizer(props.index)">
-                  Delete
-                </button>
-              </b-table-column>
-            </template>
+            <b-table-column label="Delete" v-slot="props">
+              <button class="button is-small is-danger" v-if="!props.row.disableEdit" @click="deleteOrganizer(props.index)">
+                Delete
+              </button>
+            </b-table-column>
 
             <template slot="empty">
               <empty-table-stub />
diff --git a/src/views/summeruniversity/EditSecond.vue b/src/views/summeruniversity/EditSecond.vue
index 125af3e74..ffd3e9031 100644
--- a/src/views/summeruniversity/EditSecond.vue
+++ b/src/views/summeruniversity/EditSecond.vue
@@ -218,27 +218,25 @@
           <b-table
             :data="event.organizers"
             :loading="isLoading">
-            <template slot-scope="props">
-              <b-table-column field="first_name" label="First and last name" sortable>
-                <router-link target="_blank" rel="noopener noreferrer" :to="{ name: 'oms.members.view', params: { id: props.row.user_id } }">
-                  {{ props.row.first_name }} {{ props.row.last_name }}
-                </router-link>
-              </b-table-column>
-
-              <b-table-column field="role" label="Role">
-                <div class="select">
-                  <select v-model="props.row.role">
-                    <option v-for="(name, role) in roles" v-bind:key="role" v-bind:value="role">{{ name }}</option>
-                  </select>
-                </div>
-              </b-table-column>
-
-              <b-table-column label="Delete">
-                <button class="button is-small is-danger" v-if="!props.row.disableEdit" @click="deleteOrganizer(props.index)">
-                  Delete
-                </button>
-              </b-table-column>
-            </template>
+            <b-table-column field="first_name" label="First and last name" sortable v-slot="props">
+              <router-link target="_blank" rel="noopener noreferrer" :to="{ name: 'oms.members.view', params: { id: props.row.user_id } }">
+                {{ props.row.first_name }} {{ props.row.last_name }}
+              </router-link>
+            </b-table-column>
+
+            <b-table-column field="role" label="Role" v-slot="props">
+              <div class="select">
+                <select v-model="props.row.role">
+                  <option v-for="(name, role) in roles" v-bind:key="role" v-bind:value="role">{{ name }}</option>
+                </select>
+              </div>
+            </b-table-column>
+
+            <b-table-column label="Delete" v-slot="props">
+              <button class="button is-small is-danger" v-if="!props.row.disableEdit" @click="deleteOrganizer(props.index)">
+                Delete
+              </button>
+            </b-table-column>
 
             <template slot="empty">
               <empty-table-stub />
diff --git a/src/views/summeruniversity/Participants.vue b/src/views/summeruniversity/Participants.vue
index 541bdfc68..a4aecee86 100644
--- a/src/views/summeruniversity/Participants.vue
+++ b/src/views/summeruniversity/Participants.vue
@@ -33,58 +33,56 @@
           :data="applications"
           :row-class="row => calculateClassForApplication(row)"
           :loading="isLoading">
-          <template slot-scope="props">
-            <b-table-column field="first_name" label="First and last name" sortable>
-              {{ props.row.first_name }} {{ props.row.last_name }}
-            </b-table-column>
-
-            <b-table-column field="body_name" label="Body">
-              <router-link :to="{ name: 'oms.bodies.view', params: { id: props.row.body_id } }">
-                {{ props.row.body_name }}
-              </router-link>
-            </b-table-column>
-
-            <b-table-column label="View">
-              <a href="#" @click.prevent="showModal(props.row.id)">View</a>
-            </b-table-column>
-
-            <b-table-column label="Manage status" field="status" centered sortable>
-              <div class="select" :class="{ 'is-loading': props.row.isSaving }">
-                <select v-model="props.row.newStatus" @change="switchPaxStatus(props.row)">
-                  <option value="pending">Pending</option>
-                  <option value="accepted">Accepted</option>
-                  <option value="rejected">Rejected</option>
-                </select>
-              </div>
-            </b-table-column>
-
-            <b-table-column label="Cancelled?" field="cancelled" centered sortable>
-              <div class="select" :class="{ 'is-loading': props.row.isSavingCancelled }">
-                <select v-model="props.row.newCancelled" @change="switchPaxCancelled(props.row)" :disabled="props.row.cancelled">
-                  <option :value="true">Yes</option>
-                  <option :value="false">No</option>
-                </select>
-              </div>
-            </b-table-column>
-
-            <b-table-column label="Confirmed?" field="confirmed" centered sortable>
-              <div class="select" :class="{ 'is-loading': props.row.isSavingConfirmed }">
-                <select v-model="props.row.newConfirmed" @change="switchPaxConfirmed(props.row)" :disabled="props.row.attended">
-                  <option :value="true">Yes</option>
-                  <option :value="false">No</option>
-                </select>
-              </div>
-            </b-table-column>
-
-            <b-table-column label="Attended?" field="attended" centered sortable>
-              <div class="select" :class="{ 'is-loading': props.row.isSavingAttended }">
-                <select v-model="props.row.newAttended" @change="switchPaxAttended(props.row)" :disabled="!props.row.confirmed">
-                  <option :value="true">Yes</option>
-                  <option :value="false">No</option>
-                </select>
-              </div>
-            </b-table-column>
-          </template>
+          <b-table-column field="first_name" label="First and last name" sortable v-slot="props">
+            {{ props.row.first_name }} {{ props.row.last_name }}
+          </b-table-column>
+
+          <b-table-column field="body_name" label="Body" v-slot="props">
+            <router-link :to="{ name: 'oms.bodies.view', params: { id: props.row.body_id } }">
+              {{ props.row.body_name }}
+            </router-link>
+          </b-table-column>
+
+          <b-table-column label="View" v-slot="props">
+            <a href="#" @click.prevent="showModal(props.row.id)">View</a>
+          </b-table-column>
+
+          <b-table-column label="Manage status" field="status" centered sortable v-slot="props">
+            <div class="select" :class="{ 'is-loading': props.row.isSaving }">
+              <select v-model="props.row.newStatus" @change="switchPaxStatus(props.row)">
+                <option value="pending">Pending</option>
+                <option value="accepted">Accepted</option>
+                <option value="rejected">Rejected</option>
+              </select>
+            </div>
+          </b-table-column>
+
+          <b-table-column label="Cancelled?" field="cancelled" centered sortable v-slot="props">
+            <div class="select" :class="{ 'is-loading': props.row.isSavingCancelled }">
+              <select v-model="props.row.newCancelled" @change="switchPaxCancelled(props.row)" :disabled="props.row.cancelled">
+                <option :value="true">Yes</option>
+                <option :value="false">No</option>
+              </select>
+            </div>
+          </b-table-column>
+
+          <b-table-column label="Confirmed?" field="confirmed" centered sortable v-slot="props">
+            <div class="select" :class="{ 'is-loading': props.row.isSavingConfirmed }">
+              <select v-model="props.row.newConfirmed" @change="switchPaxConfirmed(props.row)" :disabled="props.row.attended">
+                <option :value="true">Yes</option>
+                <option :value="false">No</option>
+              </select>
+            </div>
+          </b-table-column>
+
+          <b-table-column label="Attended?" field="attended" centered sortable v-slot="props">
+            <div class="select" :class="{ 'is-loading': props.row.isSavingAttended }">
+              <select v-model="props.row.newAttended" @change="switchPaxAttended(props.row)" :disabled="!props.row.confirmed">
+                <option :value="true">Yes</option>
+                <option :value="false">No</option>
+              </select>
+            </div>
+          </b-table-column>
 
           <template slot="empty">
             <empty-table-stub />