fix: TypeError: 0 is read-only

[MariusE]

🐛 The bug

When I use useState in combination with v-model and reload the page with DevTools 'Payload' opened, the console get's logged full with error TypeError: 0 is read-only per tick. This also seems to be triggered when changing a value.

Below a simplified example:

Steps:

1. Open Link below
2. Open Nuxt DevTools
3. Go to 'Payload' page in Nuxt DevTools
4. Open Firefox DevTools on Console
5. Change selected Value
6. ➡ Error is logged

---

The repeated errors could not be reproduced on StackBlitz. Hard-Reloading the page is also not possible with StackBlitz. So it's only reproducable on value-change.

---

It took me a while to figure out, that the error is propably caused by Nuxt DevTools and not my own code. So, hopefully I did not overlook anythink.

🛠️ To reproduce

https://stackblitz.com/edit/nuxt-devtools-yry9cp9b?file=app.vue

🌈 Expected behavior

No error when changing state with DevTools opened.

ℹ️ Additional context

Example component:

<script setup lang="ts">
const role = useState('role', () => 'manager')

const c = () => {
  console.info('Role changed to:', role.value)
}
</script>

<template>
  <div>
    <label for="role-select">Select Role:</label>
    <select @change="c" id="role-select" v-model="role">
      <option value="manager">Manager</option>
      <option value="admin">Admin</option>
      <option value="user">User</option>
    </select>
    <p>Selected Role: {{ role }}</p>
  </div>
</template>