bootstraptable在knockoutjs中不能很好地工作

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<!-- Bootstrap JS and Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<!-- BootstrapTable -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>

<!-- KnockoutJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>

function AppViewModel() {
    var self = this;
    self.items = ko.observableArray([
        { id: 1, name: 'Item 1', price: '$1' },
        { id: 2, name: 'Item 2', price: '$2' },
        { id: 3, name: 'Item 3', price: '$3' }
    ]);
}

ko.applyBindings(new AppViewModel());

<table id="table" data-toggle="table" data-bind="foreach: items">
    <thead>
        <tr>
            <th data-field="id">ID</th>
            <th data-field="name">Name</th>
            <th data-field="price">Price</th>
        </tr>
    </thead>
    <tbody>
        <tr data-bind="attr: { 'data-id': $index() }">
            <td data-bind="text: id"></td>
            <td data-bind="text: name"></td>
            <td data-bind="text: price"></td>
        </tr>
    </tbody>
</table>

<script>
$(document).ready(function() {
    $('#table').bootstrapTable();
});
</script>

function AppViewModel() {
    var self = this;
    self.items = ko.observableArray([
        { id: 1, name: 'Item 1', price: '$1' },
        { id: 2, name: 'Item 2', price: '$2' },
        { id: 3, name: 'Item 3', price: '$3' }
    ]);

    self.tableData = ko.computed(function() {
        return self.items().map(function(item) {
            return {
                id: item.id,
                name: item.name,
                price: item.price
            };
        });
    });
}

ko.applyBindings(new AppViewModel());

$(document).ready(function() {
    $('#table').bootstrapTable({
        data: ko.unwrap(viewModel.tableData)
    });

    viewModel.items.subscribe(function(newItems) {
        $('#table').bootstrapTable('load', newItems);
    });
});

$(document).ready(function() {
    $('#table').bootstrapTable({
        data: ko.unwrap(viewModel.tableData),
        onClickRow: function(row, $element) {
            var item = ko.dataFor($element[0]);
            console.log('Clicked on:', item);
        }
    });
});