title: Vue Reduce method function is not working
body: <p>I'm trying to calculate the total balances returned from the array of objects of clients stored in Firebase.</p>
  
  <p>I'm using Vue for this project. Right now, it's not working as it's returning <code>NaN</code></p>
  
  <pre><code>computed: {
      totalOwed() {
        if (this.clients &amp;&amp; !this.loading) {
          // console.log(this.clients);
          this.clients.reduce((total, client) =&gt; {
            return total + parseFloat(client.balance.toString());
          }, 0);
        }
        return null;
      },
      ...mapState(["clients", "user", "loading"])
    }
  </code></pre>
  
  <p>When I used the <code>totalOwed</code> computed property in the template, I got a <code>NaN</code> as the value.
  Here is the <a href="https://github.com/peoray/client-panel" rel="nofollow noreferrer">Github link</a> and <a href="https://reverent-dubinsky-998ac1.netlify.com/" rel="nofollow noreferrer">Live site</a></p>
  
  <p>Code can be found in the <code>Clients.vue</code> inside of <code>src/components/clients</code> directory</p>