watchEffect nie dziala na tablicy

witam!
watchEffect() nie działa z obiektem reaktywnym, który jest tablicą. Mogę się domyślić, że problem leży po stronie pliku useContacts.js, który zwraca nam tablicę kontaktów. Przy pierwszym załadowaniu strony, konsola wyświetla dane związane z zawartością tablicy, ale kiedy zaczynam dodawać kontakty to konsola nie informuje o zmianach.

<script>
import AppBar from "./AppBar.vue";
import ContactList from "./ContactList.vue";

import useContacts from "../functions/useContacts.js";

import { watchEffect } from "vue";

export default {
  components: {
    AppBar,
    ContactList,
  },

  setup() {
    const { contactList, addContact, removeContact, editContact } =
      useContacts();

    watchEffect(() => {
      console.log(contactList);
    });

    return { contactList, addContact, removeContact, editContact };
  },
};
</script>

I teraz plik useContacts.js

import { ref } from "vue";

const useContacts = () => {
  const contactList = ref([]);

  const addContact = ({ id, name, email }) => {
    contactList.value.push({ id, name, email });
  };

  const removeContact = (id) => {
    const itemIndex = contactList.value.findIndex(
      (contact) => contact.id === id
    );

    if (itemIndex < 0) {
      return;
    }

    contactList.value.splice(itemIndex, 1);
  };

  const editContact = ({ id, name, email }) => {
    const itemIndex = contactList.value.findIndex(
      (contact) => contact.id === id
    );

    if (itemIndex < 0) {
      return;
    }

    contactList.value.splice(itemIndex, 1, { id, name, email });
  };

  return {
    contactList,
    addContact,
    removeContact,
    editContact,
  };
};

export default useContacts;

Witam! Pozwoliłem sobie "odświeżyć" temat bo może komuś przyda się rozwiązanie problemu.

• w watch musimy napisać [...contactList.value], nie możemy użyć bezpośredniej referencji do contactList
• deep: true - dzięki tej właściwości watch będzie śledził również obiekty, które są zagnieżdzone w inne obiekty

const contactList = ref([]);

watch(
    () => [...contactList.value],
    () => {
      localStorage.setItem(
        'vue_simplecontacts',
        JSON.stringify(contactList.value)
      );

    },
    { deep: true }
  );

ps. cały kod jest tutaj: https://github.com/KrwawyOrk/simple-contacts/blob/master/src/functions/useContacts.js