Dynamically bind a knockout component with a cshtml template breaks the viewmodel - asp.net-mvc

Question

I have an issue with knockout components in our SPA, on a certain page I'm trying to implement a component; all observables passed through the params attribute are working as they should. But when I create ko.observable(), ko.computed, .. in the component's viewmodel they just don't work as they should. (Btw we're working with asp.net mvc and we need to serve cshtml files as the templates, the razor in the views helps us with several parsing options)
So getting the files are not directly the issue, what is weird is that in the cshtml file, i can't use the unwrapped text: test, I have to write text: test(). computeds aren't updated either, nothing seems to do what it should.
What I think I'm missing is that the component is never added through ko.applyBindings() but that's purely a guess. can anybody shed some light on this please?
What to do with adding a knockout component after page has already loaded. And yes I've searched around, been fiddling all day without avail.. thanks in advance.
This is in our mainpage.
<track-item-list params="value: data, selected: selectedItems"></track-item-list>
Below within script tags:
if (!ko.components.isRegistered('track-item-list')) {
ko.components.register('track-item-list', { require: '#Url.Content("~/Scripts/viewmodels/items/_cItemList.js")' });
}
There's a viewmodel js file:
define(['knockout', 'cshtml!/items/_cItemList'], function (ko, cshtmlString) {
function ItemViewModel(params) {
var self = this;
self.selected = params.selected;
self.test = ko.observable('Hello World!');
}
return { viewModel: ItemViewModel, template: cshtmlString };
});
cshtml template:
<span data-bind="text: selected().length"></span>
<ul data-bind="foreach: selected">
<li data-bind="text: Total"></li>
</ul>
<span data-bind="text: test"></span>
The cshtml file is loaded via a custom script:
define(['jquery'], function($) {
var buildText = {};
return {
load: function (name, req, onLoad, config) {
var self = this,
file = name,
segments = file.split('/');
// If the module name does not have an extension, append the default one
if (segments[segments.length - 1].lastIndexOf('.') == -1) {
file += '.cshtml';
}
$.get(name, function (html, status, xhr) {
console.log('html loaded: ' + name);
onLoad(html);
});
}
};
});