Struggling to use a custom decorator for bound components

Help Requests
1

We have a few Aurelia2 projects ongoing, one using routing and the other just show binding components.

In the first project we use a decorator from child components to tell the body if it needs to change its layout. Works great. However, because the second doesn’t use routing, I’m stuck on how to provide equivalent functionality as the first uses LifeCycleHooks with load.

Setting layout via LifeCycleHook load:

import { inject, lifecycleHooks } from "aurelia";

@lifecycleHooks()
@inject()
export class LayoutService {
    load(vm, params, next, current) {
        if(vm.layout) {
            document.body.setAttribute("layout", vm.layout);
        } else {
            document.body.removeAttribute("layout");
        }
    }
}

Decorator:

export function layout(layout: string) {
    return function(vm) {
        vm.prototype.layout = layout;

        return vm;
    }
}

I want to do something like:

import { inject} from "aurelia";

@inject()
export class LayoutService {
    bound(vm, params, next, current) {
        if(vm.layout) {
            document.body.setAttribute("layout", vm.layout);
        } else {
            document.body.removeAttribute("layout");
        }
    }
}

Any suggestions on how I might be able to get this to work when a component is bound?

Thanks!

Brett