How to update a reactive object with Vue3 (options API)

Question

Currently I'm migrating my Vue2 project to Vue3. Here is an example that I had before and can not understand how to make it work in Vue3.

<template>
  <div>
     <q-form @submit="onSubmit">
        <q-input
           v-model="accountProperties.title"
        />
        <q-select
           v-model="accountProperties.type"
        />
        ....
     </q-form>
  </div>
</template>

<script>
function initAccount() {
  return {
    title: '',
    type: null,
    balance: 0,
    currencyCode: null
  }
}

export default {
  props: ['account'],

  data() {
    return {
      accountProperties: initAccount()
    }
  },

  mounted() {
    this.resetForm()
  },

  methods: {
    onSubmit() {
      // dispatch accountProperties
    },
    resetForm() {
      if (this.account) {
        this.accountProperties = {
            title: this.account.title,
            type: this.account.type,
            balance: this.account.balance,
            currencyCode: this.account.currencyCode
          }
      } else {
        this.accountProperties = initAccount()
      }
    }
  }
</script>

So there is a component that may receive an account property and if it exists fill the internal value accountProperties with its data on mounted event (resetForm also used for other cases).
This worked in Vue2, but not in Vue3. Seems like I can not just reassign objects value. There is a note in a documentation about this, but I do not understand what is the solution.

The problem is that when resetForm method is being called accountProperties are changed, but then it's value is not reflected in inner components (debugged with vue devtool, their modelValue is null). Seems like it's not reactive anymore after I reassigned the whole object.