Необходимо написать чеклист (ToDo) приложение на Vue.js

Javascript та Typescript — неправильно зазначені категорії?

Необходимо написать чеклист (ToDo) приложение на Vue.js

Необходимые функции для работы со списками:
===========================
1. Возможность задавать массив предопределенных значений списка как основную переменную. Приложение app.js должно быть отдельно, а переменная в HTML коде страницы.
Например что-то в духе:
$list = [
    'овощи' => [
        'картофель', 'томаты', '...', 'лук'
    ]
    'фрукты' => [
        'апельсин', 'яблоки', '...', 'бананы'
    ]
]

2. <input> добавления элемента в существующий список пользователем.
3. Кнопка редактирования элементов 
4. Кнопка удаления элемента из списка.
5. Кнопка сброса к значениям по умолчанию для всех списков, которые берутся из массива в пункте 1. При нажатии должно быть все как и было по умолчанию до визита посетителя на страницу приложения.

Требования и уточнения
============================
1. Хранение данных в LocalStorage;
2. Должно работать в современных браузерах на iOS, Safari, Chrome, Firefox;
3. HTML/CSS - Bootstrap 5;
4. Пользователь может добавлять элементы в существующие списки, но не может создавать свой список;
5. При удалении пользователем всех элементов из конкретного списка (например «Овощи»), блок списка скрывается ( <div id="todo-1" class="todo-block" style="display: none"> ) и остается только список «Фрукты».

Пример кода страницы (что-то в духе что хочу видеть)
============================
<body>
  <СКРИПТ>
      $list = [...]
  </СКРИПТ>
  <div id="app" class="todo-app"></div>
  <СКРИПТ src="app._j_s"></СКРИПТ>
</body>

Пример структуры (как видит посетитель)
============================
<div id="todo-1" class="todo-block">
  <h2>Овощи</h2>
  <div class="list-group">
    <label class="list-group-item">
      <input class="form-check-input me-1" type="checkbox" value="">
      Картофель [РЕДАКТИРОВАТЬ] [УДАЛИТЬ]
    </label>
    <label class="list-group-item">
      <input class="form-check-input me-1" type="checkbox" value="">
      Томаты [РЕДАКТИРОВАТЬ] [УДАЛИТЬ]
    </label>
    <label class="list-group-item">
      <input class="form-check-input me-1" type="checkbox" value="">
      Капуста [РЕДАКТИРОВАТЬ] [УДАЛИТЬ]
    </label>
    <label class="list-group-item">
      <input class="form-check-input me-1" type="checkbox" value="">
      Морковь [РЕДАКТИРОВАТЬ] [УДАЛИТЬ]
    </label>
    <label class="list-group-item">
      <input class="form-check-input me-1" type="checkbox" value="">
      ПОЛЬЗОВАТЕЛЬСКАЯ ПЕРЕМЕННАЯ 1 [РЕДАКТИРОВАТЬ] [УДАЛИТЬ]
    </label>
    <label class="list-group-item">
      <input class="form-check-input me-1" type="checkbox" value="">
      ПОЛЬЗОВАТЕЛЬСКАЯ ПЕРЕМЕННАЯ 2 [РЕДАКТИРОВАТЬ] [УДАЛИТЬ]
    </label>
  </div>
  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Введите новый элемент списка" aria-label="Введите новый элемент списка">
    <button class="btn btn-outline-secondary" type="button">Добавить</button>
  </div>
</div>
<div id="todo-2" class="todo-block">
  <h2>Фрукты</h2>
  <div class="list-group">
    <label class="list-group-item">
      <input class="form-check-input me-1" type="checkbox" value="">
      Апельсины [РЕДАКТИРОВАТЬ] [УДАЛИТЬ]
    </label>
    <label class="list-group-item">
      <input class="form-check-input me-1" type="checkbox" value="">
      Яблоки [РЕДАКТИРОВАТЬ] [УДАЛИТЬ]
    </label>
    <label class="list-group-item">
      <input class="form-check-input me-1" type="checkbox" value="">
      Ананасы [РЕДАКТИРОВАТЬ] [УДАЛИТЬ]
    </label>
    <label class="list-group-item">
      <input class="form-check-input me-1" type="checkbox" value="">
      Бананы [РЕДАКТИРОВАТЬ] [УДАЛИТЬ]
    </label>
    <label class="list-group-item">
      <input class="form-check-input me-1" type="checkbox" value="">
      ПОЛЬЗОВАТЕЛЬСКАЯ ПЕРЕМЕННАЯ 1 [РЕДАКТИРОВАТЬ] [УДАЛИТЬ]
    </label>
    <label class="list-group-item">
      <input class="form-check-input me-1" type="checkbox" value="">
      ПОЛЬЗОВАТЕЛЬСКАЯ ПЕРЕМЕННАЯ 2 [РЕДАКТИРОВАТЬ] [УДАЛИТЬ]
    </label>
  </div>
  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Введите новый элемент списка" aria-label="Введите новый элемент списка">
    <button class="btn btn-outline-secondary" type="button">Добавить</button>
  </div>
</div>

Остальное во вложении.

Оновлення #1 від 6 жовтня 2021

Можно доработать существующий пример https://github.com/BurakGur/vue3-composition-api-todo-app