Error writing a computed value, but I do not write any

Question

I set up a flag foundInBrowser that informs me whether the entry 'aaa' is present in localStorage. Clicking on an input toggle adds/removes the entry, which in turn automatically updates the flag:

<template>
  <q-toggle 
    v-model="foundInBrowser" 
    checked-icon="check" 
    color="red"
    :label="`${foundInBrowser ? '' : 'not'} registered in browser`" 
    unchecked-icon="clear"
    @click="registerInBrowser" 
  />
</template>

<script>
    const registerInBrowser = () => {
        // toggle the existance of the localstorage entry
        if (foundInBrowser.value) {
            localStorage.removeItem('aaa')
        } else {
            localStorage.setItem('aaa', person.value?.ID as string)
        }
    }
    const foundInBrowser = computed(() => localStorage.getItem('aaa') !== null)
</script>

When clicking on the toggle, I get an error in the console:

Write operation failed: computed value is readonly

I do not understand this error: I am not trying to write to foundInBrowser anywhere.

Answer 1

It's pretty much what it says it is. You are putting a computed into a v-model:

<q-toggle 
    v-model="foundInBrowser" 

Since v-model is two-way binding, the q-toggle will write back to it, which fails with the error since you cannot write to a regular computed.

---

Either turn it into a one-way binding by binding only to modelValue:

<q-toggle 
    :modelValue="foundInBrowser" 

or turn your computed into a writable computed:

const foundInBrowser = computed({
  get(){
    return localStorage.getItem('aaa') !== null
  },
  set(newValue){
     // probably set or delete 'aaa' according to newValue?
  }
})