Using TypeScript VueJS , vue-property-decorator

In a <template>
    <p>{{ transitionName }} </p>
    <transition :name="transitionName" mode="out-in">
        <router-view></router-view>
    </transition>

In export default class App extends Vue
        const   ComputedValue       = toDepth < fromDepth ? 'slide-up-fade' : ((toDepth==fromDepth) ? 'slide-left-fade' : 'slide-down-fade');
        this.syncedTransitionName   = ComputedValue;
        console.log(`${from} -> ${to} (${this.syncedTransitionName}) (${ComputedValue})`);

The output is {Object} {Object} (slide-up-fade) (slide-left-fade)

Problem Statement:
this.syncedTransitionName gets the default value per @PropSync but attempts to change the value do not work and i'm not sure what i'm missing.

    @PropSync('transitionName', { default: 'slide-up-fade', type: String })syncedTransitionName!: string;