VUE和Bootstrap使用Table的一个问题

我的网站是做一个数据库维护。数据库中有多张表，每张表的字段不一样，因此我是通过VUE + BootStrap来实现：
HTML代码如下：
<table style=" text-overflow:ellipsis; " class="table table-condensed"
                   data-ajax="ajaxRequest"
                   data-toggle="table"
                   pageNumber=1
                   id="componenttable"
                   data-side-pagination="server"
                   data-unique-id="pd-id"
                   data-pagination="true">
                <thead style="background-color:#169BD5;color:white;">
                <tr>
                    <th v-for="item in columns" data-field="${item}" class="product_th">${item}</th>
                </tr>
                </thead>
            </table>
对应的javaScript代码如下：var tableVM = new Vue({
                el: "#componenttable",
                data: {
                    columns: ["status", "speed","id", "gmt_create", "gmt_modified"],
                    "table": "mytable"
                },
                created:function(){
                    var _self = this;
                        var url = "/testweb/tablecolumns?table=" + _self.table;
                        $.get(url, function (data) {
                            var all_data = JSON.parse(data);
                            _self.columns =  all_data["result"];
                        });
                },
                methods: {
                }
            }
    );
function ajaxRequest(params) {
        url = "/testweb/tabledata";
        $.post(url, {"table": "mytable"}, function (data) {
            all_data = JSON.parse(data);
            data = all_data["result"];
            params.success({total: all_data["count"], rows: data});
            $(".sortable").css("padding-right", "15px");
            $(".td-text-container").parent().css("text-align", "left");
        });
    }
我的思路是通过一个请求:/testweb/tablecolumns来获取这个表有多少个字段，然后再通过另外一个请求/testweb/tabledata来获取数据。
但是现在的问题是，即使我每次获取到的表的字段是对的，页面上显示的还是只有最初赋值时的5列。麻烦大家看一下，这个代码有什么问题。