Почему реактивный объект, содержащий обновления класса, не запускает обновления? ⇐ Javascript

[Anonymous]

У меня есть простая страница с объектом реактивного состояния, содержащим класс.
Изменения свойств в классе не вызывают обновления в компоненте.
Простой пример компонента приведен ниже, но полный пример можно найти на игровой площадке vue.
Я новичок в Vue и не понимаю, почему такие классы, как это не работает, поэтому прошу прощения, если это глупый вопрос. Я потратил много времени на изучение документации Vue и StackOverflow, но не нашел никаких объяснений.
Есть ли общий шаблон для этого?
Я пытаюсь переместить обработка данных вне компонента для уменьшения беспорядка — полная версия будет иметь множество вызовов API к серверу и другой логики — поэтому использование простого объекта в состоянии было бы гораздо менее элегантным.
Если я помещу простую строку в объект состояния, обновите ее после repo инициализируется и отображает эту строку в шаблоне, значение state.repo.items.length также обновится. Это означает, что массив определенно обновляется и на него правильно ссылаются, просто обновление страницы не запускается.

import { reactive } from 'vue';
import { Repo } from './repo';
import { onMounted } from 'vue';

const state = reactive({
repo: new Repo(),
msg: 'Not Updated'
});

onMounted(async () => {
await state.repo.initAsync();
});


Reactive Test
{{ state.repo.items.length }}
]


Подробнее здесь: https://stackoverflow.com/questions/793 ... er-updates