Component inheritance with bindings on the base doesn't work as expected

[googleoryx]

I'm submitting a bug report

• Library Version:

    "aurelia-animator-css": "1.0.4",
    "aurelia-binding": "2.5.4",
    "aurelia-bootstrapper": "2.3.3",
    "aurelia-event-aggregator": "1.0.3",
    "aurelia-fetch-client": "1.8.2",
    "aurelia-framework": "1.3.1",
    "aurelia-history": "1.2.1",
    "aurelia-history-browser": "1.4.0",
    "aurelia-loader-nodejs": "1.1.0",
    "aurelia-loader-webpack": "2.2.1",
    "aurelia-logging": "^1.5.2",
    "aurelia-logging-console": "1.1.1",
    "aurelia-pal": "1.8.2",
    "aurelia-pal-browser": "1.8.1",
    "aurelia-pal-nodejs": "2.0.0",
    "aurelia-polyfills": "1.3.4",
    "aurelia-router": "1.7.1",
    "aurelia-templating": "1.10.4",
    "aurelia-templating-resources": "1.13.1",
    "aurelia-templating-router": "1.4.0",

Please tell us about your environment:

• Operating System:
  Windows 10

• Node Version:
  12.7.0

• NPM Version:
  6.14.8

• Aurelia CLI OR JSPM OR Webpack AND Version
  I'm using Webpack

    "aurelia-cli": "^1.0.2",
    "aurelia-tools": "^2.0.0",
    "aurelia-webpack-plugin": "^3.0.0",
    "webpack": "^4.27.0",

• Browser:
  Chrome (maybe All)

• Language:
  TypeScript 3.6.4

Current behavior:
I'm talking about normal components, none of this cool shadow component stuff

Base Component has a property binding
Component A extends the base and displays it in funky red text
Component B extends the base and displays it in boring black text
Coincidentally, both components have a dependency that is autoinjected (to get to the base which needs it)

If I have a page that renders Component A, then I navigate to a page that renders Component B, either Component B won't render at all, or it will render as though I was using Component A. Likewise if I first went to a page that had Component B on it, then went to a page with Component A, then Component A wouldn't display (or would be displaying like Component B). I think there is some kind of caching going on somewhere in the composition engine based on the component's "fingerprint", and that caching mechanism seems to think these components are the same.

The solution is to take the binding decorator off the Base Component. I declare the property as abstract on the abstract base (keep TypeScript happy). I declare the property with the binding decorator and Component A and Component B separately.

Expected/desired behavior:
That both components would display as expected and that I wouldn't need to declare the property with the binding decorator separately on Component A and Component B, rather than just declaring it in the Base Component.

I think this is enough and the workaround is not a problem for me but if you need more information then let me know.

By the way, Aurelia rocks 😁