Inertia VUE JS + pinia

Hello guys, I am using pinia on inertia vue js to track the state of a variable. My code is structured like this.

component1 which in this case updates the state of the variable, this is the snippet:

import { useSelectedInvoicesStore } from '../stores/SelectedInvoicesStore'
const selectedInvoicesStore = useSelectedInvoicesStore()

const selectInvoice = (id, invoice_number) => {

    let invoice = {
      id,
      invoice_number
    };
    
    selectedInvoicesStore.addInvoice(invoice);
}

in my component2 I have a watch that IS NOT BEING TRIGGERED on when invoice is added, and that is my problem

import { useSelectedInvoicesStore } from '../stores/SelectedInvoicesStore'
const selectedInvoicesStore = useSelectedInvoicesStore()
watch(
  () => selectedInvoicesStore.selectedInvoices,
  () => {
    console.log('store ', selectedInvoicesStore.selectedInvoices)
  }
);

and this is my SelectedInvoiceStore.js

import { defineStore } from 'pinia'


export const useSelectedInvoicesStore = defineStore('selectedInvoicesStore', {
    state: () => ({ selectedInvoices: [] }),
    actions: {
        async addInvoice(invoice) {
        this.selectedInvoices.push(invoice);
      },
    },
});

I do not understand where is the problem, why is my watch not being triggered in component2, when I add a console.log in the function where I add the invoice the invoice is being added successfully to the store, but the watch is not being triggered.