There is a workaround for this particular situation. It's important to note that when assigning an array to a variable in JavaScript, it creates a reference to the original array rather than a copy. Since Vue's $refs are arrays, we can utilize this knowledge in the following way:
<template>
<div>
<ul v-if="showAvailable">
<li v-for="pet in allPets.available" :key="pet.id" ref="pets">
{{ pet.name }}
</li>
</ul>
<ul v-else>
<li v-for="pet in allPets.unavailable" :key="pet.id" ref="pets">
{{ pet.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
props: ['allPets'],
data() {
showAvailable: true // will usually change dynamically
shownPets: null // initially set to null
},
mounted() {
this.$set(this.$data, 'shownPets', this.$refs.pets);
},
watch: {
shownPets: {
handler(newVal, oldVal){
// Perform actions when there are DOM changes
},
deep: true
}
}
}
</script>
This method allows us to assign our data shownPets to the pets stored in the $ref after the component has been mounted. The reference will reflect different elements depending on whether showAvailable is true or false, enabling us to monitor changes to $ref or the DOM effectively.