ko-component-router issue when changing paths manually

ko-component-router-paths.js

import ko from 'knockout';
import 'ko-router';

ko.options.deferUpdates = true;

class Task {
    constructor(id, name) {
        this.id = ko.observable(id);
        this.name = ko.observable(name);
    }
}

ko.components.register('app', {
    synchronous: true,
    viewModel: class App {
        constructor(params, componentInfo) {
            //this.base = '/index';
            this.routes = {
                '/': 'overview',
                '/tasks/!': 'tasks'
            };
        }
    },
    template: `
    Overview
    <a data-bind="path: '/'">Overview</a>
    <a data-bind="path: '/tasks/'">Tasks</a>
    <ko-component-router id="root" params="
      base: base,
      routes: routes,
      hashbang: true">
    </ko-component-router>
  `
});

ko.components.register('overview', {
    synchronous: true,
    viewModel: class OverView {
        constructor(ctx) {
        }
    },
    template: `OverView`
})

ko.components.register('tasks', {
    synchronous: true,
    viewModel: class Tasks {
        constructor(ctx) {
            this.selectedTask = ko.observable();
            this.selectTask = this.selectTask.bind(this);
            this.tasks = ko.observableArray();
            for (var index = 1; index < 10; index++) {
                this.tasks.push(new Task(index, `Task ${index}`));
            }
            this.routes = {
                '/': 'empty-component',
                '/:id': 'task-details'
            }
            //I'm attaching the data I want to pass to the child on the parent router context
            ctx.observableToBeAccessedOnTheChildRouter = this.selectedTask;

        }

        myInTransition(el, fromCtx, toCtx) {
            debugger;
            console.log('Child IN transition');
        }

        myOutTransition(el, fromCtx, toCtx) {
            debugger;
            console.log('Child OUT transition');
        }

        selectTask(task) {
            this.selectedTask(task);
            console.log(ko.toJSON(this.selectedTask));
        }
    },
    template: `
    Tasks:</br>
    <!-- ko if: selectedTask -->
    Selected task: <span data-bind="text: selectedTask().name()"></span> 
    <!-- /ko -->
    <ul data-bind="foreach: { data: tasks, as: 'task' }">
        <li>
        <!-- I should be able to use '/' + task.id, but it's not working. still have to use /tasks/task.id -->
        <a data-bind="path: '/tasks/' + task.id(), text: task.name, click: $parent.selectTask"></a>
        </li>
    </ul>
     <ko-component-router id="child" 
     params="routes: routes,
    inTransition: myInTransition,
    outTransition: myOutTransition">
    </ko-component-router>`
})

ko.components.register('task-details', {
    synchronous: true,
    viewModel: class TaskDetails {
        constructor(ctx) {
            this.dataPassedFromParent = ctx.$parent.observableToBeAccessedOnTheChildRouter;
            this.selectedTaskId = ko.pureComputed(() => { return ctx.params.id(); });
        }
    },
    template: `Task details for task <span data-bind="text: selectedTaskId"></span>`
})


ko.components.register('empty-component', {
    synchronous: true,
    viewModel: class Empty {
        constructor(ctx) {
        }
    },
    template: `<span>This is the empty component</span>`
})

ko.applyBindings();