更改数组时Vue3 ref不更新

Question

This issue occurs only when I'm trying to update an array which uses Vue's "ref".

Here's some basic example code of what I have:

<script setup>
import { ref } from 'vue';

let arr = ref([]);

function someUpdateFunc(val) {
    arr.value.push(val);

    console.log(arr.value);
}
</script>

If I check the console in my browser I see the updated array as expected. However, when I try to run some functionality in the same component that needs the updated values it doesn't work.

To confirm this I installed the Vue dev tools Chrome extension and checked the array on the component. It matches the functionality not working as the variable never updates and looks like this:

arr: Array[0] (Ref)

Please can anyone advise why my array isn't updating?

Thanks,

Answer 1

try use this.$set?

this.$set("Object"，"Properties of Object"，"changeValue")