Aurelia custom component in component

I have base component called selector

<template>
    <span> this is common for all selectors </span>
      <div>
        <content>
        </content
      </div>
</template>

import {transient} from "aurelia-framework"; 

@transient() 
export class Selector { 
  constructor(){ 
    console.log("selector called"); 
  } 
}

I have SelectorBase class

@transient() 

export class SelectorBase { 
    @bindable({ name: 'myProp', defaultBindingMode: bindingMode.twoWay }) myProp = null;
    constructor() { 
      console.log("selector base called"); 
    } 
}

and 2 derived components called SelectorA and SelectorB. Here is an example

<template>
  <div>
    This is selector A
  </div>
</template>

import {SelectorBase} from "./selectorBase"; 
import { transient} from "aurelia-framework";

@transient() 
export class SelectorA extends SelectorBase{ 
  constructor() { 
    super(); 
    console.log("selector A called"); 
  } 
}

I have the same thing for selector B.

I'm not deriving from Selector but from SelectorBase. So my SelectorA and SelectorB components are embedded inside Selector component

And I use it in my views like this

<require from="./../../selector"></require>
<require from="./../../selectorA"></require>

<selector>
  <selector-a></selector-a>
</selector>

When I open my first view that has selectorA this works (SelectorBase and SelectorA constructor are being called), but when I open a different view that has selector B content part is not displayed (only html from base selector). SelectorBase constructor is called but SelectorB constructor is not being called

I must mention that when I navigate back to my first view everything is OK (SelectorBase and SelectorA constructor are being called as expected)

I can't find what I'm doing wrong.

EDIT I think my bindable property on the SelectorBase is causing the issue. Not sure why.

Thank you