Почему стирается значение в поле ввода?

Question

[shasoftX]

Есть вот такая функция, которая создаёт поля

import { ref } from 'vue'
function CFormTest(jsonFormInfo) {
  for (const name in jsonFormInfo) {
    this[name] = ref(null);
  }
}

делаю
const form = new CFormTest({ "email" : 1 })
и подставляю в поле (использую quasar, но тут в принципе разницы никакой, тот же vue)

<q-input v-model="formTest.email.value" type="email"></q-input>

Проблема в том, что это работает если функция находится в том же файл vue. Если я её выношу в отдельный файл

import { ref } from 'vue'
export default function (jsonFormInfo) {
  for (const name in jsonFormInfo) {
      this[name] = ref(null);
  }
}

то при вводе в поле значения оно не отображается. Не пойму что тут не так.

Может кто подскажет?

Вот что выводится в консоли по объектам


Судя по всему что с импортами. Не ясно что. Если функцию ref импортировать в .vue файле и передавать в конструктор, то всё нормально работает. А если импортировать непосредственно в js файле, то криво.

Comments

[Kentavr16]

Я на вью не пишу, но подозреваю что анонимные функции экспортировать не лучшая практика.

[shasoftX]

Kentavr16, попробовал определить функцию и её экспортировать - не помогает.

При вводе значение в поле изменяется, но не отображается почему то. При этмо если сделать два поля (с обоими видами функций), то значение в проблемном поле появляется если в другом поле начать вводить значение.
Чего то я не понимаю в логике работы :(