I am using vue vite. I need to use property decorator. But not working Object.defineProperty. in fact it is not trigger getter and setter functions. sample code is here. How can I solve this?

<template>
  <div>
    <button @click="change">değiştir</button>
    <div>
      {{ store.getUsername() }}
    </div>
    <div>
      <input type="text" v-model="text" />
    </div>
  </div>
</template>

<script setup lang="ts">
function State(target: any, propertyKey: string) {
  let value = target[propertyKey];

  const getter = () => {
    console.log('store', value);
    return value;
  };
  const setter = (newValue: any) => {
    console.log(`Changing value of ${propertyKey} from ${value} to ${newValue}`);
    value = newValue;
  };

  Object.defineProperty(target, propertyKey, {
    get: getter,
    set: setter,
    enumerable: true,
    configurable: true,
  });
}

class GlobalStore {
  constructor() {}

  @State
  username = 'test';

  setUsername(data: string): void {
    this.username = data;
  }

  getUsername(): string {
    return this.username;
  }
}

const store = new GlobalStore();
import { ref } from 'vue';

const text = ref(' ');

function change() {
  console.log(store.getUsername());

  store.username = text.value;
  store.setUsername(text.value);
}
</script>

<style scoped></style>