Can't make .ui.qml work with .qml

[t.vanbesien]

Hi, i'm using this simple component to try the feature of separating logic from interface declaration:

TestComponentForm.ui.qml

import QtQuick 2.15
import QtQuick.Controls 2.15

Item {
    width: 1024
    height: 768

    property alias button: button

    Button {
        id: button
        x: 64
        y: 64
        text: qsTr("Button")
    }
}

TestComponent.qml

import QtQuick 2.15

TestComponentForm {
    button.onClicked: console.log("log from TestComponent");
}

But it doesn't work, nothing is printed in the log.

I tried changing the TestComponent.ui.qml to TestComponent.qml and put the js function directly inside it:
TestComponentForm.qml

import QtQuick 2.15
import QtQuick.Controls 2.15

Item {
    width: 1024
    height: 768

    property alias button: button

    Button {
        id: button
        x: 64
        y: 64
        text: qsTr("Button")
        onClicked: {
            console.log("log from TestComponentForm");
        }
    }
}

And it does work, but then, the logic isn't separated anymore ^^

There must be something I'm missing. I'm trying to make a simple example like this work before refactoring the application I'm working on. But I can't. The two components were generated with Qt Design Studio when doing Add New... > Qt Quick UI Form. So I thought it would work from the get go but there must be something I'm missing.

[t.vanbesien]

Found the answer, I was loading the .ui.qml file instead of the .qml file in my application... Haha.