Vue JS. Layered calls not synchronised: Web Page -> VUEX-> API call

Question

I have refactored my VUE JS code to have a dedicated API layer (Calls out to AWS Graphql services), it is called by the VUEX layer. It now has the following levels:

     Web Page -> Vuex  -> API

I want to retrieve data (this.getActivities) before referencing it (Point 7). I have cut down the code for simplicity:

 async created() {
    console.log("Point 1")
    await this.getActivities();

  },
 mounted() {
    console.log("Point 7")
    // reference the data set by this.getActivities()
  },


  methods: {
    
    async getActivities() {
      // from DB
      console.log("Point 2")
     this.$store.dispatch('getAllActivities')  // vuex call

    },


VUEX DATA STORE

 actions: {

     async getAllActivities ({ commit }) {
      console.log("point 3")

      const activities = await queries.getActivities()
 
      console.log("point 6")
      commit('setActivities', activities)

    },


API
  async getActivities () {

    await API.graphql({
        query: listActivities
      }).then((response) => {

         console.log("Point 4")

      })
      
      console.log("Point 5")


    return activitiesList
  },

Prints the following: Point 1 Point 2 point 3 Point 7 Point 8 Point 4 Point 5 point 6

I presume I have misused the await/sync processes?

Thanks