How to remove the whole column in vue table? - vue.js

Question

I have a problem in removing the whole column and its corresponding row in vue-table.
Here is my code.
<b-table :fields="fields" :items="data">
<template slot="action" slot-scope="data" v-if="authorize = 1">
</template>
</b-table>
export default{
data(){
authorize: 0,
data: [],
fields: [
{key: 'id', label: '#'},
{key: 'name', label: 'Name'},
{key: 'action', label: 'Action'}
],
}
}
In this case, When I use v-if inside the <template> it only removes the corresponding row of the column.
This is the result of the code above
| # | Name | Action |
----------------------------------------
| 1 | John Doe | |
| 2 | Chicharon Ni Mang Juan | |
| 3 | Lumanog | |
My Problem is, I want to remove the column itself like this.
| # | Name |
------------------------------
| 1 | John Doe |
| 2 | Chicharon Ni Mang Juan |
| 3 | Lumanog |
#Regards,

Answer 1

With vue-tables-2 I don't think there's any other choice but to have conditional for different column sets, like in computed. For example:
computed: {
fields: function() {
let fields = [{key: 'id', label: '#'}, {key: 'name', label: 'Name'}]
if (this.authorize === 1) {
fields.push({key: 'action', label: 'Action'})
}
return fields
}
}

Answer 2

I just found a simple solution by not using the table on this way:
<b-table :fields="fields" :items="data">
<template slot="action" slot-scope="data" v-if="authorize = 1">
</template>
</b-table>
I just used this simple html table:
<table class="table" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th v-if="authorize == 1">Action</th>
</tr>
</thead>
<tbody>
<tr v-for="user in data">
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td v-if="authorize == 1">
<button variant="primary">Delete</button>
</td>
</tr>
</tbody>
</table>
Here, I can easily manipulate to remove/show the column and its data.
Thanks!