Vue2 component rendering on ajax response - ajax

Question

I have created a component that reacts to this template:
<table-sort index="job.job_id"></table-sort>
However, when I get this template from a ajax response and add it to the DOM. It doesn't recognize it as a Vue component. How do I render this component?
Here is my component:
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);
},
},
});
Here is how I call the code to generate the table:
var ajaxTable = new AjaxTable({
name: 'jobs',
request: inputs,
container: '#job-table',
fields: fields,
});
Here is the code that appends the template:
public async drawTable() {
this.table = $(`<table class="table table-striped table-bordered table-hover table-condensed"><thead><tr id="header"></tr></thead><tbody></tbody></table>`);
this.count = $(`<div class="count pull-left"></div>`);
this.pagination = $(`<div class="pagination pull-right"></div>`);
this.fields.map((field: ColumnData) => {
let out = `<th>${field.title}`;
if (!!field.sort) {
out += ` <table-sort index="${field.sort}"></table-sort>`;
}
out += `</th>`;
this.table.find('#header').append(out);
});
this.container.append(this.table, this.count, this.pagination);
}