Почему один из массивов в локальном хранилище очищается при вводе данных в форму находящейся по коревому маршруту?

Question

[Andy Koshman]

Всем привет, есть 2 компонента с бизнес логикой TheEducation.vue и TheService.vue, есть компонент шаблона BaseForm.vue, в котором я рендерю пропсы используя как шаблон. Суть в файле BaseForm.vue, проблема в том что если я что то введу в input по маршруту /education, то создастся пустой массив servicePanels в локальном хранилище. В общем бардак полнейший происходит, непонятное поведение. Я как смог набросал пример чтобы было понятно что происходит, подскажите пожалуйста правильно ли я вообще реализовываю данный функционал и где какие лажи? Я уже запаялся на данной задаче, возможно проблема невелика.
Песочница:
Ссылка

Answer 1

[Andy Koshman]

Для корректной работы, в функцииupdateLocalStorage нужно было сделать проверку:

if (serviceList.value && serviceList.value.length > 0) {
    localStorage.setItem('servicePanels', JSON.stringify(serviceList.value));
 }