How to correctly use class instances as data parameter values ​​in vue.js?

Question

Vue.js

There is a class:

class User {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }

    get fullName() {
        return this.firstName + ' ' + this.lastName;
    }

    getFullName() {
        return this.firstName + ' ' + this.lastName;
    }
}

If i use it in vue.js component like this

export default {
    data: () => ({
        user: new User('Иван', 'Иванов')
    })
}

, then vue.js will redefine the instance of the User class into a regular object, i.e. throw out getters, class setters, throw out class functions and throw out its getters and setters to ensure reactivity. And I would like to keep the ability to receive fullName. It would be absolutely ideal if the fullName getter also became reactive.

Answer 1

vue.js will override the instance of the User class into a regular object

OH REALLY??!