How to build offline-first PWAs with Vue signals?

<script setup>
import { ref } from 'vue'
import { useLocalStorage } from '@vueuse/core'

const cart = useLocalStorage('cart', [], {
  serializer: { read: JSON.parse, write: JSON.stringify }
})

const addItem = (item) => {
  cart.value.push(item)
  if (navigator.onLine) {
    syncToServer(cart.value)  // Background sync
  }
}

window.addEventListener('online', () => {
  syncToServer(cart.value)  // Auto-resync
})
</script>

<template>
  <div v-for="item in cart" :key="item.id" class="cart-item">
    {{ item.name }} - ${{ item.price }}
  </div>
</template>