Реф, который сам сохраняется

Для сохранения в localStorage всегда нужны одни и те же строки: прочитать сохранённое при создании рефа и сохранять его с помощью watch при каждом изменении. С композаблом вы напишете их только один раз:

import { ref, watch } from "vue";

export function useLocalStorage(key, initial) {
    const saved = localStorage.getItem(key);
    const value = ref(saved === null ? initial : JSON.parse(saved));

    watch(
        value,
        (newValue) => {
            localStorage.setItem(key, JSON.stringify(newValue));
        },
        { deep: true },
    );

    return value;
}

Тогда каждому значению, которое должно сохраняться, хватит одной строки:

const name = useLocalStorage("name", "");
const order = useLocalStorage("order", []);

Как это работает:

• У композабла два параметра: key — имя, под которым он сохраняет, и initial — значение, с которого нужно начать, пока ничего не сохранено. Благодаря им одна и та же функция сохраняет имя под ключом "name", а заказ — под ключом "order".
• Он возвращает один реф, а не объект, поэтому разбирать нечего: после const name = useLocalStorage("name", ""); переменная name — это реф, готовый к использованию в v-model или {{ name }}.
• watch внутри принадлежит вызову: каждый вызов следит за своим рефом и сохраняет его под своим ключом. { deep: true } нужен для того, чтобы сохранялся и push() в массив, как вы знаете из урока «Вычисляемые значения и наблюдатели».
• JSON.stringify() и JSON.parse() работают с текстом, с числами, а также с true и false, так что композабл может сохранить что угодно.

Компонент ничего этого не видит. Он работает с name и order, как с любым другим рефом, а они сохраняются сами.