Learn Vue 3, Step By Step: Episode 20 - https://laracasts.com/series/learn-vue-3-step-by-step/episodes/20?reply=18547

demo.vue

<script setup>
  import { useStorage } from "@/composables/useStorage";

  let food = useStorage('food', 'tacos');
</script>

<template>
  <main>
    <p>
      What is your favorite food? <input type="text" v-model="food">
    </p>
  </main>
</template>

useStorage.js

import { ref, watch } from "vue";

export function useStorage(key, data = null) {
  let storedData = read();

  if (storedData) {
    data = ref(storedData);
  } else {
    data = ref(data);

    write();
  }

  watch(data, write, { deep: true });

  function read() {
    return JSON.parse(localStorage.getItem(key));
  }

  function write() {
    if (data.value === null || data.value === '') {
      localStorage.removeItem(key);
    } else {
      localStorage.setItem(key, JSON.stringify(data.value));
    }
  }

  return data;
}