title: Firestore Vue - Seperate data changed but not total sum
body: <p>Let assume I have 2 wallets: Cash and Bank account.
  When I change amount of a wallet, it show correctly and immediately by function <code>useLoadWallets</code> .
  But the total <code>totalWallets</code> is still not changed.</p>
  <pre><code>&quot;firebase&quot;: &quot;^9.9.1&quot;,  
  &quot;vue&quot;: &quot;^3.2.37&quot;,
  </code></pre>
  <p>firebase/index.js</p>
  <pre><code>import { initializeApp } from 'firebase/app'
  import { getFirestore } from 'firebase/firestore'    
  const firebaseConfig = {}
  initializeApp(firebaseConfig)
  export const db = getFirestore()
  </code></pre>
  <p>firebase/wallets.js</p>
  <pre><code>import { ref, onUnmounted } from 'vue'
  import { collection, doc, setDoc, deleteDoc, updateDoc, onSnapshot, query, orderBy } from 'firebase/firestore'
  import { db } from './index.js'    
  export const createWallet = async (id, wallet) =&gt; {
    return setDoc(doc(db, 'wallets', id), wallet)
  }    
  export const updateWallet = async (id, wallet) =&gt; {
    return updateDoc(doc(db, 'wallets', id), wallet)
  }    
  export const deleteWallet = async (id) =&gt; {
    return deleteDoc(doc(db, 'wallets', id))
  }    
  export const useLoadWallets = () =&gt; {
    const wallets = ref([])
    const q = query(collection(db, 'wallets'), orderBy('order', 'asc'))
    const close = onSnapshot(q, (snapshot) =&gt; {
      wallets.value = snapshot.docs.map(docItem =&gt; ({ id: docItem.id, ...docItem.data() }))
    })
    onUnmounted(close)
    return wallets
  }    
  export const totalWallets = () =&gt; {
    const total = ref(0)
    const close = onSnapshot(collection(db, 'wallets'), (snapshot) =&gt; {
      snapshot.forEach((docItem) =&gt; { total.value += docItem.data().amount })
    })
    onUnmounted(close)
    return total
  }
  </code></pre>
  <p>component.vue</p>
  <pre><code>&lt;template&gt;    
      &lt;p v-for=&quot;wallet in wallets&quot; v-bind:key=&quot;wallet.id&quot;&gt;
          &lt;span&gt;{{ wallet.id }}&lt;/span&gt;
          &lt;span&gt;{{ wallet.amount }}&lt;/span&gt;
      &lt;/p&gt;
      &lt;span&gt;Total&lt;/span&gt;
      &lt;span&gt;{{ total }}&lt;/span&gt;      
  &lt;/template&gt;
  &lt;script setup&gt;
  import { useLoadWallets, totalWallets } from '../../firebase/wallets.js'
  const wallets = useLoadWallets()
  const total = totalWallets()
  &lt;/script&gt;
  </code></pre>
  <p>Same code for 2 funtions and got 2 results. Can you explain to me?</p>