Начальное значение состояния в Nuxt

У функции useState второй аргумент - не готовое число или массив, а функция, которая возвращает начальное значение. Nuxt вызывает её только когда для данного ключа ещё нет сохранённой ячейки. Повторные вызовы на той же странице или в другом компоненте получают уже существующую ссылку, а функцию инициализации больше не выполняют.

Так безопасно задавать объекты и массивы: каждый ключ получает свою копию, а не один общий литерал на весь проект. Число 1 или пустой список [] удобно возвращать из стрелочной функции.

Пример со счётчиком, который стартует не с нуля, а с единицы:

<script setup>
	const step = useState('stepCount', () => 1);
</script>
<template>
	<p>
		Step: {{ step }}
	</p>
	<button type="button" @click="step++">
		Next step
	</button>
</template>

Для списка элементов стартовое значение задают так же через функцию:

<script setup>
	const tasks = useState('taskList', () => []);
	
	function addTask(label) {
		tasks.value.push(label);
	}
</script>
<template>
	<ul>
		<li v-for="task in tasks" :key="task">
			{{ task }}
		</li>
	</ul>
	<button type="button" @click="addTask('review')">
		Add task
	</button>
</template>

Заведите общее состояние со списком отделов компании. При первом создании ключ должен содержать ровно один элемент с названием на английском.

Выведите список на странице и добавьте кнопку, которая дописывает в массив ещё одно название отдела без сброса уже сохранённых строк.