title: Please Help! Maximum call stack size exceeded with Firebase and Vuex
body: <p><strong>Context</strong></p>
  <p>I am creating a basic pagination feature with only forward and back buttons. I am using firebase, nuxt js and vuex. On initial load, the store is dispatches the getPosts function in vuex. This function fills the post state and the last post so I can use it as a reference when I need to load more post.</p>
  <p><strong>Problem</strong><br />
  The <code>lastVisiblePost</code> variable is a complex firebase object (snapshots.docs) and calls a stack size exceed error when I try to add it to the store. The weird part is that it only does this when I refresh the page. The code works perfectly when it's only running on the client. Can anyone please help me figure this out?</p>
  <p><strong>Fail Attempts</strong></p>
  <ul>
  <li>Checked typeof which it's an object</li>
  <li>Turn <code>lastVisiblePost</code> to JSON (throws  starting at object with constructor 'FirebaseAppImpl' | property 'firebase_' -&gt; object with constructor 'Object' | property 'apps' -&gt; object with constructor 'Array')</li>
  <li>Used a copy of <code>lastVisiblePost</code></li>
  <li>disable strict mode</li>
  </ul>
  <p><strong>Code</strong></p>
  <p><em>Local</em></p>
  <pre><code>&lt;template&gt;
      &lt;button @click=&quot;loadMorePosts({ paginationDirection: 'next' })&quot;&gt;Next&lt;/button&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
          async fetch() {
              await this.$store.dispatch('post/getPosts');
          },
  
          methods: {
              loadMorePosts({ paginationDirection }) {
                  this.$store.dispatch('post/getMorePosts', { paginationDirection });
              },
          },
      };
  &lt;/script&gt;
  </code></pre>
  <p><em>Vuex</em></p>
  <pre><code>import { db } from '~/plugins/firebase';
  
  export const state = () =&gt; ({
     posts: null,
     pagination: {
         postsPerPage: 3,
         lastVisiblePost: null,
     },
  });
  
  export const actions = {
     async getPosts({ commit, state }) {
         const snapshots = await db.collection('posts').limit(state.pagination.postsPerPage).get();
  
         if (snapshots.docs.length === 0) { return []; }
  
         const posts = snapshots.docs.map((doc) =&gt; ({ ...doc.data(), id: doc.id }));
  
         const firebasePosts = snapshots.docs;
         const lastIndex = firebasePosts.length - 1;
         const lastVisiblePost = firebasePosts[lastIndex];
  
         commit('SET_POSTS', posts);
         commit('SET_LAST_VISIBLE_POST', lastVisiblePost);
     },
   
   async getMorePosts({ commit, state }, { paginationDirection }) {
         if (state.pagination.isFetchingData) {  return; }
  
     let query;
     
         if (paginationDirection === 'next') {
             query = db.collection('posts').startAfter(state.pagination.lastVisiblePost).limit(state.pagination.postsPerPage);
         }
  
     const snapshots = await query.get();
     
         if (snapshots.docs.length === 0) {  return [];  }
  
         const posts = snapshots.docs.map((doc) =&gt; ({ ...doc.data(), id: doc.id }));
  
         const firebasePosts = snapshots.docs;
         const lastIndex = firebasePosts.length - 1;
         const lastVisiblePost = firebasePosts[lastIndex];
  
         commit('SET_POSTS', posts);
         commit('SET_LAST_VISIBLE_POST', lastVisiblePost);
  
         if (paginationDirection === 'next') {
             commit('SET_PREVIOUS_FIRST_POST', firebasePosts[0]);
         }
     },
  };
  
  export const mutations = {
     SET_POSTS(state, posts) {
         state.posts = posts;
     },
     SET_LAST_VISIBLE_POST(state, lastVisiblePost) {
         // Problem happens here
         state.pagination.lastVisiblePost = lastVisiblePost;
     },
  };
  </code></pre>