Задача на live coding: написать composable useLocalStorage, который будет являться прослойкой между разработчиком и прямым взаимодействием с localStorage — записывать, перезаписывать значения по ключу и следить за изменением этого значения.

Composable читает JSON по ключу, предоставляет реактивное значение и сохраняет его изменения через watch, обрабатывая ошибки хранилища.

Минимальный Vue 3-вариант для вызова внутри setup клиентского компонента; значения должны быть JSON-совместимыми:

import { ref, watch } from 'vue';
export function useLocalStorage(key, initialValue) {
  const value = ref(initialValue);
  const error = ref(null);
  try {
    const raw = localStorage.getItem(key);
    if (raw !== null) value.value = JSON.parse(raw);
  } catch (e) { error.value = e; }
  watch(value, next => {
    try {
      const raw = JSON.stringify(next);
      if (raw === undefined) throw new TypeError('JSON value required');
      localStorage.setItem(key, raw);
      error.value = null;
    } catch (e) { error.value = e; }
  }, { deep: true });
  return { value, error };
}

Изменение value записывает и перезаписывает ключ. Такой вариант не синхронизирует независимые экземпляры и вкладки: для этого добавляют общий реестр и обработку storage с очисткой подписки. Для SSR чтение переносится на клиент после монтирования.