About reactive ref([]) I don't understand vue3 composition API

Question

I have make some side project to practice with vue.js. The issue i encountered is behavior re-render of ref when it data changing. I have a function to take new user info and update it record in array here is 3 version of code:

const listUserState = ref([]);

const saveEditUser = async (newUserInfor) => {
    const status = await fetchPost(api.editUser, newUserInfor[0]);
    if (status.status == true) {
        updateSuccess.value = true;
        listUserState.value.forEach(async (user, index) => {
            if (user.username == newUserInfor[0].user.username) {
                listUserState.value[index] = {};
                await nextTick();
                listUserState.value[index] = { ...newUserInfor[0].user };
            }
        });
    } else {
        updateSuccess.value = false;
    }
    setTimeout(() => {
        updateSuccess.value = null;
    }, 3000);
};

watch(listUserState.value, (newValue, oldValue) => {
console.log(newValue);
});

const listUserState = ref([]);

const saveEditUser = async (newUserInfor) => {
    const status = await fetchPost(api.editUser, newUserInfor[0]);
    if (status.status == true) {
        updateSuccess.value = true;
        listUserState.value.forEach(async (user, index) => {
            if (user.username == newUserInfor[0].user.username) {
                listUserState.value[index] = {};
                listUserState.value[index] = { ...newUserInfor[0].user };
            }
        });
    } else {
        updateSuccess.value = false;
    }
    setTimeout(() => {
        updateSuccess.value = null;
    }, 3000);
};

watch(listUserState.value, (newValue, oldValue) => {
console.log(newValue);
});

const listUserState = ref([]);

const saveEditUser = async (newUserInfor) => {
    const status = await fetchPost(api.editUser, newUserInfor[0]);
    if (status.status == true) {
        updateSuccess.value = true;
        listUserState.value.forEach(async (user, index) => {
            if (user.username == newUserInfor[0].user.username) {           
                listUserState.value[index] = { ...newUserInfor[0].user };
            }
        });
    } else {
        updateSuccess.value = false;
    }
    setTimeout(() => {
        updateSuccess.value = null;
    }, 3000);
};

watch(listUserState.value, (newValue, oldValue) => {
console.log(newValue);
});

I wondering that only version1.vue work fine and the was updated 2 other version 2 and 3 the DOM do not update. But when i logging for test change of listUserState all 3 version have logging data so I know all version work fine and the ref variable changed. But why only the version1.vue update the DOM .Although version2.vue and version3.vue listUserState also change but the DOM do not update. I read on official document of vue they said: I try to use splice method like this

// use splice for repalce two lines 
//listUserState.value[index] = {};
//listUserState.value[index] = { ...newUserInfor[0].user };

listUserState.value.splice(index,1,newUserInfor[0].user);

the listUserState variable still changed but not update the DOM. Only version1.vue update the DOM. Is there something i misunderstand? Please help me and if you need more detail info please let me know. Thank you <3