VueJS - Component does not re-render when reactive data reference update its value

I can't solve my problem. Recently I updated VueJS from version 3.0.5 to 3.2.38 and it seems like the whole Reactivity of the page is broken.

I have a browser game where I have separated classes/data and VueJs components. Before update, i could easily use ref or reactive outside VueJS components and then set a reference in vueJs component to that reactive field and whenever I changed value it triggers re-render but it suddenly stopped working with the new version.

Code example might tell more:

Let's assume I have this object in class PickingPhase.ts somewhere outside VueJS

    public pickingPhaseProps = reactive({
        time: 0,
        phase: Shared.DRAFT_PHASES.PICK_PHASE,
        draftMode: Shared.DRAFT_TYPES.ALL_PICK,
        draftTurn: -1
    });

In my component i create data that refers to this exact value

<template>
   <div class="timmer text-shadow">
       <h1 :class="{ redText: props?.time && props.time <= 10000 }">
             {{ props?.time && Math.floor(props.time / 1000) }}
       </h1>
   /div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
    data() {
        return {
            props: Battle.instance?.pickingPhaseProps
        }
    }
    ...

Tho if I update pickingPhaseProps it does not trigger re-render.

...
this.pickingPhaseProps.time = NewValue

I check vue changelog but I did not find the reason why it broke after the update version. Is there something i missed?