[AList] stops working if items(ref list) is updated

[lospringliu]

https://stackblitz.com/edit/vitejs-vite-l8eezu?file=src/App.vue

<script setup>
import { ref } from "vue"
import HelloWorld from './components/HelloWorld.vue'
const items = ref([
  {id: 1, text: "item 1"},
  {id: 2, text: "item 2"},
  {id: 3, text: "item 3"},
])

const addItem = () => {
  console.log('clicked')
  const id = Math.floor(Math.random() * 100)
  items.value.push({id: 4, text: "added item 4" })
}
const selected = ref(null)
</script>

<template>
  <ABtn @click="addItem"> test anu list with ref and dynamically update </ABtn>

  <AList v-model="selected" :items="items">
  </AList>

  selected: {{ selected }}
</template>

[sandros94]

There is something similar happening with ASwitch too, I was trying to describe it here.

As a summary: I was noticing that when I was updating my ref, using another component, my ASwitch that was connected to updated accordingly. But if I used something other than another component (like an event at page load) to update the ref the ASwitch wouldn't update its state.

I might be wrong but I feel like its the same issue. Idk how to check it tho.

[sandros94]

There is something similar happening with ASwitch too, I was trying to describe it here.

As a summary: I was noticing that when I was updating my ref, using another component, my ASwitch that was connected to updated accordingly. But if I used something other than another component (like an event at page load) to update the ref the ASwitch wouldn't update its state.

I might be wrong but I feel like its the same issue. Idk how to check it tho.

I wanted to double check what I've said, and no, at this point I'm not convinced that my problem and yours are related.
In my case I was using wrongly both ref and computed. Not to mention that I was trying to load a client-only composable while still being server side.

[knoxnoe]

#144 FIx
wait for @jd-solanki review