API композиции Vue 3: данные, полученные через Axios в onMounted, не отображаются в таблицах v-for. ⇐ Html

[Anonymous]

Я создаю простую панель мониторинга, используя Vue 3 с синтаксисом . У меня есть две таблицы (Пользователи и Продукты) и кнопки для переключения между ними. Хотя я вижу ответ JSON на вкладке «Сеть» моего браузера, таблицы остаются пустыми или, похоже, не реагируют на изменение данных.
Я использую ref для своих массивов данных и вызываю API внутри onMounted. Есть ли в моей реализации состояние гонки или проблема с реактивностью?
Вот мой полный компонент:

import { ref, onMounted } from 'vue'
import axios from 'axios'

const users = ref([])
const products = ref([])
const activeTable = ref('users')

// Fetching users from local Node.js API
const getUsers = async () => {
try {
const response = await axios.get('http://localhost:3000/users')
users.value = response.data
} catch (error) {
console.error("User fetch error:", error)
}
}

// Fetching products
const getProducts = async () => {
try {
const response = await axios.get('http://localhost:3000/products')
products.value = response.data
} catch (error) {
console.error("Product fetch error:", error)
}
}

const showUsers = () => { activeTable.value = 'users' }
const showProducts = () => { activeTable.value = 'products' }

onMounted(() => {
getUsers()
getProducts()
})




Data List

Users
Products



Users



ID
Username
Email




{{ user.id }}
{{ user.username }}
{{ user.email }}






Products



ID
Name
Price




{{ product.id }}
{{ product.name }}
{{ product.price }}








table {
border-collapse: collapse;
width: 500px;
margin-top: 20px;
}
th, td {
border: 1px solid black;
padding: 10px;
}


The problem:Even though the console shows no errors and the API works, the v-for doesn't seem to render the rows. Should I be using reactive() instead of ref() for arrays, or is the v-if logic on the parent div interfering with the lifecycle of the table?