Knockout js array giving length 0 but it contains some values

Question

Here is my code

@Component({
    selector: "workshops",
    template: template
})
export class Workshops {
    public userPhotoUrl: ko.Observable<string>;
    public resizing: ko.Computed<string>;
    public sections: ko.ObservableArray<ToolButton>;

    constructor(
        private readonly viewManager: ViewManager,
        private readonly userService: UserService,
                private readonly workshopSections: ToolButton[]
                
    ) {
        this.userPhotoUrl = ko.observable<string>(null);
                this.resizing = ko.pureComputed(() => this.viewManager.journeyName() ? "vertically horizontally" : "vertically horizontally suspended");
                console.log(this.workshopSections);
                console.log(this.workshopSections.length);
                // this.sections = ko.observableArray<ToolButton>(workshopSections);
                this.sections = ko.observableArray(this.workshopSections);
                // this.sections = this.workshopSections;
    }

    @OnMounted()
    public async loadUserProfile(): Promise<void> {
        const url = await this.userService.getUserPhotoUrl();
        this.userPhotoUrl(url);
    }

    public closeWorkshop(view: View): void {
        this.viewManager.closeWorkshop(view);
    }
}

Here is my output.

When I am reloading a page it gives me output as shown above.

but when I went to the page by router click it working correctly as below.