Use localstorage as a Vue Composition Api ref

LocalStorage.js

import { ref, watch } from '@vue/composition-api'

export default key => {
  let init = localStorage.getItem(key)

  const variable = ref(init ? JSON.parse(init) : undefined)
  
  watch(
    () => variable.value, 
    to => {
        localStorage.setItem(key, JSON.stringify(to))
    }, 
    { deep: true }
  )

  return variable
}

Can be used as:

import useLocalStorage from 'LocalStorage.js'

const redLights = useLocalStorage('redLights')

<red-light v-for="light of redLights" />

How about this:

import { ref, watch } from '@vue/composition-api'

export default key => {
  const variable = ref(JSON.parse(localStorage.getItem(key) || null))
  
  watch(
    variable , 
    to => {
        localStorage.setItem(key, JSON.stringify(to))
    }, 
    { deep: true }
  )

  return variable
}