How to initialise a carousel and use Knockout observables in the same JS file

Question

I'm experimenting with Require JS and Knockout JS in Magento 2 and I've ran into a strange problem where I can't use Knockout JS and initialise a carousel in the same JS file.

The carousel works fine if I initialise the JS without using Magento_Ui/js/core/app but then the Knockout observables won't be applied.

But if I do use Magento_Ui/js/core/app the carousel doesn't work correctly, it does get initialised but it won't actually slide. There are no errors in the console.

I know the carousel works correctly when not used alongside Magento_Ui/js/core/app.

My question is why would using using Magento_Ui/js/core/app prevent the carousel from sliding? I suspect I have done something wrong in the JS.

Even if you have done something similar your code might help me out, the dev docs are still pretty poor/none existent when it comes to using Knockout.

This is my code:

carousel.phtml

<div data-bind="scope: 'scope-carousel'">
    <h2 data-bind="text: title"></h2>
    <div class="carousel">
        <div>
            TEST Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci beatae blanditiis cupiditate doloribus ducimus eos fuga harum illo inventore iusto minima molestiae omnis provident quaerat quod reiciendis, sequi temporibus veniam!
        </div>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta hic maxime neque numquam perferendis quis sed? Dolorem ducimus et exercitationem fugiat ipsa iure magni nam, perspiciatis quidem sunt ut, vitae.
        </div>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, sit, voluptatum? Accusantium aspernatur at dolores earum enim excepturi id molestiae molestias nesciunt officia perspiciatis, repudiandae, saepe sed sint ullam veritatis.
        </div>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, sit, voluptatum? Accusantium aspernatur at dolores earum enim excepturi id molestiae molestias nesciunt officia perspiciatis, repudiandae, saepe sed sint ullam veritatis.
        </div>
    </div>
</div>


<script type="text/x-magento-init">
{
    ".carousel": {
        "Magento_Ui/js/core/app": {
            "components": {
                "scope-carousel": {
                    "component": "Magento_Cms/js/carousel",
                    "element": ".carousel",
                    "carouselTitle": "A carousel test"
                }
            }
        }
    }
}
</script>

carousel.js

define(['jquery', 'ko', 'slick', 'domReady!', 'Magento_Ui/js/core/app'], function($, ko) {
    'use strict';


    return function(config, node) {
        console.log(config);
        console.log(node);

        this.title = ko.observable(config.carouselTitle);

        $('.carousel').slick({
            slidesToScroll: 1,
            slidesToShow: 1
        });
    };
});

Proof the carousel and Knockout observable both get initialised: