How to add 1 more column in Vue.js table?

Hi i need to add a Edit (just before the ID column) column in my table, see the code below=>
Let me know if you need more information, thank you very much!

<script type="text/javascript">
    $(document).ready(function () {
        new Vue({
            el: '#app',
            data: {
                loaded: false,
                search: null,
                sortedBy: null,
                selectedType: null,
                selectedCountry: null,
                uniqueType: [],
                uniqueCountry: [],
                columns: [
                    { display: 'ID', internal: 'ID', sortable: true },
                    { display: 'Type', internal: 'Supplier_x002f_Vendor_x0020_Sale', sortable: true },
                    { display: 'Country', internal: 'Country', sortable: true },
                    { display: 'Supplier Name', internal: 'Supplier_x0020_Name', sortable: true },
                    { display: 'Represented By', internal: 'Represented_x0020_By', sortable: true },
                    { display: 'First Name', internal: 'First_x0020_Name', sortable: true },
                    { display: 'Last Name', internal: 'Last_x0020_Name', sortable: true },
                    { display: 'Title', internal: 'Title', sortable: true },
                    { display: 'Email Address', internal: 'Your_x0020_Email_x0020_Address', sortable: true },
                    { display: 'Mobile Phone', internal: 'Phone', sortable: true },
                    { display: 'Office Phone	', internal: 'Office_x0020_Phone', sortable: true },
                    { display: 'City', internal: 'City', sortable: true },
                    { display: 'State', internal: 'State', sortable: true },
                    { display: 'Number', internal: 'xyvp', sortable: true },
                    { display: 'Modified', internal: 'Modified', sortable: true },
                    { display: 'Modified By', internal: 'Editor', sortable: true },
                    { display: 'Address', internal: 'Address', sortable: true },
                    { display: 'Representation', internal: 'Representation', sortable: true },
                ],
                suppliers: null,
            },
            methods: {
                // Get the suppliers data
                getSuppliers: async function () {
                    var the_select = this.columns.map(item => item.internal).join(',');
                    return await $pnp.sp.web.lists.getByTitle('Supplier Database').items.select(the_select + ',Editor/Title').expand('Editor').orderBy('Supplier_x0020_Name', true).top(5000).get();
                },
                // Clear all filters
                clearAllFilters: function () {
                    var vm = this;
                    vm.search = null;
                    vm.selectedCountry = null;
                    vm.selectedType = null;
                    vm.sortBy = null;
                }
            },
            filters: {
                shortDate: function (date) {
                    return date && moment(date) ? moment(date).format('MM/DD/YYYY') : null
                }
            },
            components: {
            },
            computed: {
                the_results: function () {
                    var vm = this;
                    var after_cleanup = [];
                    var after_search = [];
                    var after_type = [];
                    var after_country = [];
                    var after_sort = [];

                    after_cleanup = vm.suppliers.map(item => {
                        return {
                            ...item,
                            Country: item.Country ? item.Country.trim() : null,
                            Supplier_x002f_Vendor_x0020_Sale: item.Supplier_x002f_Vendor_x0020_Sale ? item.Supplier_x002f_Vendor_x0020_Sale.trim() : null
                        }
                    })

                    // after search
                    if (vm.search) {
                        after_search = after_cleanup.filter(item => {
                        	var temp = {
                        		Supplier_x0020_Name: item.Supplier_x0020_Name,
                        		Represented_x0020_By: item.Represented_x0020_By,
                        		First_x0020_Name: item.First_x0020_Name,
                        		Last_x0020_Name: item.Last_x0020_Name
                        		
                        	}
                            var string = JSON.stringify(temp ).toLocaleLowerCase();
                            var test = string.indexOf(vm.search.toLocaleLowerCase()) >= 0;

                            if (test) {
                                return item;
                            }
                        })
                    } else {
                        after_search = after_cleanup;
                    }

                    // after filter type
                    if (vm.selectedType) {
                        after_type = after_search.filter(item => {
                            if (item.Supplier_x002f_Vendor_x0020_Sale === vm.selectedType) {
                                return item;
                            }
                        })
                    } else {
                        after_type = after_search
                    }

                    // after country
                    if (vm.selectedCountry) {
                        after_country = after_type.filter(item => {
                            if (item.Country === vm.selectedCountry) {
                                return item;
                            }
                        })
                    } else {
                        after_country = after_type
                    }

                    //Adding the sort
                    if (vm.sortedBy) {
                        after_sort = _.sortBy(after_country, [function (o) { return o[vm.sortedBy]; }]);
                    } else {
                        after_sort = after_country
                    }

                    return after_sort;
                }
                
            },
            created: async function () {
                var vm = this;
                $pnp.setup({
                    sp: {
                        baseUrl: 'https://portal.ovationtravel.com/ia/'
                    }
                })

                vm.suppliers = await vm.getSuppliers();

                vm.uniqueCountry = _.sortBy(_.uniq(vm.suppliers.map(item => item.Country ? item.Country.trim() : null)));
                vm.uniqueType = _.sortBy(_.uniq(vm.suppliers.map(item => item.Supplier_x002f_Vendor_x0020_Sale ? item.Supplier_x002f_Vendor_x0020_Sale.trim() : null)));

                vm.loaded = true;
            }
        });
    })
</script>

To add an “Edit” column, insert the following code in the “columns” array:

{ display: 'Edit', internal: 'Edit', sortable: false },

So the updated code will look like this:

columns: [
{ display: 'Edit', internal: 'Edit', sortable: false },
{ display: 'ID', internal: 'ID', sortable: true },
...
],