I am building a simple dashboard using Vue 3 with syntax. I have two tables (Users and Products) and buttons to toggle between them. Although I can see the JSON response in the Network tab of my browser, the tables remain empty or don't seem to react to the data change.
I'm using ref for my data arrays and calling the API inside onMounted. Is there a race condition or a reactivity issue in my implementation?
Here is my full component:
Data List
Users
ID
Username
Email
{{ user.id }}
{{ user.username }}
{{ user.email }}
Products
ID
Name
Price
{{ product.id }}
{{ product.name }}
{{ product.price }}
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?