v-for with ref not working as suggested in documentation in some scenarios

Version

3.0.7

Steps to reproduce

Original Docs:

import { onBeforeUpdate, onUpdated } from 'vue'

export default {
  setup() {
    let itemRefs = []
    const setItemRef = el => {
      if (el) {
        itemRefs.push(el)
      }
    }
    onBeforeUpdate(() => {
      itemRefs = []
    })
    onUpdated(() => {
      console.log(itemRefs)
    })
    return {
      setItemRef
    }
  }
}

What is expected?

Filled array for component lifetime

What is actually happening?

After component update array is empty, but lifetime is continue.

Temporary solution:
Tip: Only use and export.
Authors: @NataliaTepluhina

function useListRef<T>() {
  const elements = ref<T[]>([])
  const active = ref<boolean>(false)

  watch(active, (isActive) => {
    if (isActive) {
      nextTick(() => active.value = false)
    }
  })

  function addRef(el) {
    if (!active.value) {
      elements.value = []
      active.value = true
    }
    el && elements.value.push(el)
  }

  return {
    elements,
    addRef,
  }
}

Start by reproducing the documented v-for ref example from the issue on Vue 3.0.7, then compare the array contents before and after a component update. Check whether the documented lifetime expectation matches the observed behavior and verify any proposed change against the provided temporary useListRef workaround.