Nuxt3 Composables advanced usage - Immutability

app.vue

<template>
  <div>
    <input type="text" v-model="newTodo" />
    <button
      @click="
        addToDo(newTodo);
        newTodo = '';
      "
    >
      Add ToDo
    </button>
    <ul>
      <li v-for="t in toDo">
        {{ t }} <button @click="removeToDo(t)">X</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
const { toDo, addToDo, removeToDo } = useToDo()
const newTodo = ref()
</script>

useToDo.ts

export type ToDo = string

export default function () {
  const toDo = useState<ToDo[]>('toDo', () => [])
  
  const hasToDo = (thing: string) => toDo.value.includes(thing)
  const addToDo = (thing: string) => {
    if (!hasToDo(thing)) toDo.value.push(thing)
  }
  const removeToDo = (thing: string) => {
    const index = toDo.value.indexOf(thing);
    if (index !== -1) {
      toDo.value.splice(index, 1);
    }
  }

  return {
    toDo: readonly(toDo),
    hasToDo,
    addToDo,
    removeToDo
  }
}