在ajax响应上呈现Vue2组件

Question

我创建了一个对此模板做出反应的组件：

task findTaskCreatingSpecificOutput() {
  doLast {
    subprojects { subproject ->
      subproject.tasks.findAll { task ->
        task.outputs.getFiles().getFiles().findAll { output ->
          output == 'thisIsTheOne'
        }
      }.flatten().each { println it }
    }
  }
}

但是，当我从ajax响应中获取此模板并将其添加到DOM时。它没有将它识别为Vue组件。如何渲染此组件？

这是我的组件：

<table-sort index="job.job_id"></table-sort>

以下是我如何调用代码来生成表格：

Vue.component('table-sort', {
    name: 'table-sort',
    template: `
        <div class="table-sort" :data-index="index">
            <i v-on:click="sortTable($event)" direction="ASC" class="fa fa-caret-up"></i>
            <i v-on:click="sortTable($event)" direction="DESC" class="fa fa-caret-down"></i>
        </div>
    `,
    props: {
        index: {
            type: String,
            required: true,
        },
    },
    methods: {
        sortTable: function ($event) {
            const self      = $event.target;
            const index     = this.index;
            const direction = self.getAttribute('direction');

            let filters       = Url.getQueryParameters();
            filters.sort      = index;
            filters.direction = direction;
            filters.page      = 1;

            const url    = Url.getUrlWithoutQueryString();
            const newUrl = Url.appendParamsToUrl(filters, url);
            Url.redirect(newUrl);
        },
    },
});

以下是附加模板的代码：

var ajaxTable = new AjaxTable({
        name: 'jobs',
        request: inputs,
        container: '#job-table',
        fields: fields,
    });