title: Calling a component function from the store once an action is complete in Vuex
body: <p>I am trying to automatically scroll to the bottom of a div that contains a list of elements once a new element has been added.</p>
  
  <p>Since adding and removing elements is done via Axios using an API, I have to wait for a response from the server in order to update my state in Vuex.</p>
  
  <p>This means that, once an element is added in my state, every time I call the "scrollDown" function, the function scrolls to the <strong>second last element</strong> (due to the asynchronous Axios call not being registered yet).</p>
  
  <p>My question is, how do I wait for the action in Vuex to finish and then call the function in my component to scroll to the bottom of my div?</p>
  
  <p>I tried using watchers, computed properties, sending props, tracking changes from the actual state in Vuex and none of that worked...</p>
  
  <pre><code>// VUEX
  
  const state = {
    visitors: [],
    url: 'API URL',
    errors: []
  }
  const mutations = {
    ADD_VISITOR(state, response) {
      const data = response.data;
      data.Photos = [];
      state.visitors.data.push(data);
    },
  }
  const actions = {
    addVisitor: ({ commit }, insertion) =&gt; {
      axios
        .post(state.url + 'api/visitor', {
          name: insertion.visitorName
        })
        .then(response =&gt; {
          commit('ADD_VISITOR', response);
        })
        .catch(error =&gt; state.errors.push(error.response.data.message));
      state.errors = [];
    },
  }
  
  // MY COMPONENT FROM WHERE THE ACTIONS ARE BEING DISPATCHED
  
  &lt;div ref="scroll" class="visitors-scroll"&gt;
    &lt;ul v-if="visitors.data &amp;&amp; visitors.data.length &gt; 0" class="list-group visitors-panel"&gt;
      &lt;!-- Displaying appVisitor component and sending data as a prop --&gt;
      &lt;app-visitor v-for="visitor in visitors.data" :key="visitor.id" :visitor="visitor"&gt;&lt;/app-visitor&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  methods: {
    // Function that dispatches the "addVisitor" action to add a new visitor to the database
    newVisitor() {
      const insertion = {
        visitorName: this.name
      };
      if (insertion.visitorName.trim() == "") {
        this.errors.push("Enter a valid name!");
      } else {
        this.$store.dispatch("addVisitor", insertion);
        this.name = "";
      }
      this.errors = [];
      this.scrollDown(); // I WANT TO CALL THIS FUNCTION WHEN AXIOS CALL IS FINISHED AND MUTATION IN VUEX IS COMPLETED
    },
    scrollDown() {
      this.$refs.scroll.scrollTop = this.$refs.scroll.scrollHeight;
    }
  },
  </code></pre>
  
  <p>Any help is appreciated!</p>