Получатель / установщик класса JavaScript и v-модель в VueJS

Я создал класс формы, в котором я установил несколько геттеров и сеттеров для каждого поля, которое может иметь форма.

В геттерах и сеттерах я пишу и получаю доступ к хранилищу Vuex:

Функция init () - это то место, где я установил g / s.

export class Form {

    /**
     * @param data
     */
    constructor(data) {

        this.init(data);

        this.errors = new Errors();

    }

    /**
     * initially set up the getters/setters properties for the fields
     * @param data
     */
    init(data) {


        for (const propertyData in data) {

            if (data.hasOwnProperty(propertyData) && !Form.isPrototypeOf(propertyData)) {

                Object.defineProperty(Form.prototype, propertyData, {

                    get: function () {

                        return store.state.form[propertyData];

                    },

                    set: function (value) {

                        store.commit('set', {field: propertyData, value: value});
                    },

                });

            }
        }

    }


    /**
     * set the properties , also setup new setters/getters if new props where added
     * @param data
     * @returns Object {Form}
     */
    fill(data) {


        for (let field in data) {
            if (data.hasOwnProperty(field)) {
                this[field] = data[field];
            }
        }

        return this;
    }


    reset() {
        store.commit('reset');

        return this;
    }

    data() {

        return store.state.form;
    }
}

Это отлично работает, когда у меня есть ввод и привязка form.name, например это написано в Vue Storge.

и когда я делаю console.info в этой form.name, он показывает изменения

...
        methods: {
            test() {
              console.info(this.form.name);
            },
...

То, что я заметил, и это на самом деле моя проблема и вопрос.

когда я делаю {{form.name}} под вводом, например, это не обновляется, как должно, и я не уверен, почему?

Обновлено:

после обратной связи от @Jacob Goh и некоторого взлома моей проблемы кажется, что я нашел решение:

init(data) {


    for (let propertyData in data) {

        this[propertyData + '_i'] = data[propertyData];

        if (data.hasOwnProperty(propertyData) && !Form.prototype.hasOwnProperty(propertyData)) {

            Object.defineProperty(Form.prototype, propertyData, {

                get: function () {

                    this[propertyData + '_i'] = store.state.form[propertyData];

                    return this[propertyData + '_i'];

                },

                set: function (value) {

                    this[propertyData + '_i'] = value;

                    store.commit('set', {field: propertyData, value: value});
                },

            });

        }

    }

}

переменная в vue, а также в журнале консоли, кажется, обновляется правильно. Я не совсем уверен в том, что происходит.

Я предполагаю, что я добавлю новые свойства к объекту с помощью _i, поэтому vue подумал, что ему нужно настроить кучу новых наблюдателей.

Надеюсь, кто-нибудь сможет это прояснить.