Почему элементы интерфейса не отображаются при загрузке?

Question

[Олег Камзин]

С чем может быть связано такое поведение?
Видео проблемы
При загрузке страницы не все отображается, а при обновлении какого либо из элементов компонента все элементы интерфейса появляются полностью без каких либо ошибок и все работает как нужно.

Код компонента:

<template>
	<h1>Редактирование товара</h1>
	<div class="product_edit">
		<div>
			<label>Название</label>
			<input type="text" v-model="product.name">
		</div>
		<div class="product_edit_column">
			<div>
				<label>Бренд</label>
				<select v-model="product.brand" v-if="brands.length !== 0">
					<option v-for="brand in brands" :key="brand._id" :value="brand._id">{{ brand.name }}</option>
				</select>
			</div>
			<div>
				<label>Модель</label>
				<select v-model="product.model" v-if="models.length !== 0">
					<option v-for="model in models" :key="model._id" :value="model._id">{{ model.name }}</option>
				</select>
			</div>
		</div>
		<div>
			<label>Категория</label>
			<input type="text" v-model="product.category">
		</div>
		<div>
			<label>Артикул</label>
			<input type="text" v-model="product.article">
		</div>
		<div class="product_edit_column">
			<div v-for="param in category.params" :key="param.property">
				<div v-if="param.type === 'string'">
					<label>{{ param.name }}</label>
					<input type="text" v-model="product.params[param.property]">
				</div>
				<div v-if="param.type === 'number'">
					<label>{{ param.name }}</label>
					<input type="number" v-model="product.params[param.property]">
				</div>
				<div v-if="param.type === 'variants'">
					<label>{{ param.name }}</label>
					<select v-model="product.params[param.property]">
						<option v-for="variant in param.variants" :key="variant.value" :value="variant.value">{{ variant.name }}</option>
					</select>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { reactive } from 'vue'
import { useRoute } from 'vue-router'
import { Api } from '../../../api'
import { useNotificationStore } from '@/stores/notification'

const product = reactive({})
const category = {}
const brands = []
const models = []
const NotificationStore = useNotificationStore()

const getProduct = async (id) => {
	await Api.get('http://localhost:3000/products/' + id)
		.then(res => Object.assign(product, res.data))
		.catch(err => NotificationStore.sendNotification('error', err.message))
	product.brand = product.brand._id
	product.model = product.model._id
}

const getCategory = async (slug) => {
	await Api.get('http://localhost:3000/categories/' + slug)
		.then(res => Object.assign(category, res.data))
		.catch(err => NotificationStore.sendNotification('error', err.message))
}

const getBrands = async () => {
	await Api.get('http://localhost:3000/brands/')
		.then(res => brands.push(...res.data))
		.catch(err => NotificationStore.sendNotification('error', err.message))
}

const getModels = async () => {
	await Api.get('http://localhost:3000/models/')
		.then(res => models.push(...res.data))
		.catch(err => NotificationStore.sendNotification('error', err.message))
}

const start = async () => {
	await getProduct(useRoute().params.id)
	await getBrands()
	await getModels()
	await getCategory(product.category.slug)
}

start()
</script>

<style>
.product_edit {
	max-width: 800px;
}
.product_edit div {
	margin: 0 0 15px 0;
}
.product_edit label {
	display: block;
	margin: 0 0 5px 0;
	font-size: 12px;
}
.product_edit input, .product_edit select {
	width: 100%;
}
.product_edit_column {
	display: grid;
	grid-template-columns: repeat(2, 48%);
	gap: 0 4%;
}
.product_edit_column div {

}
</style>

Answer 1

[Олег Камзин]

const category = {}
const brands = []
const models = []
сделать reactive