VueJS-I need help implementing re-rendering components

I am building a site where users can upload posts. Every user has a profile page where they can see what posts they have liked and what posts they have created. Over a created post there is a delete button. When I delete the post, it gets removed, but only from the back end. On the home page and profile page (if I go to the profile page again) the post is still there. If I refresh the page everything is working perfectly, but there must be a way to make that happen without refreshing right?

I am having trouble re-rendering the components. I am very new to programming as you can see. With this delete method I need to update 3 components (Home.vue, Posts.vue and Profile.vue).

My profile component/page's delete button html:

<v-container class="mt-3" v-else>
  <v-flex xs12>
    <h2 class="font-weight-light">
      Created posts
      <span class="font-weight-regular">({{ userPosts.length }})</span>
    </h2>
  </v-flex>
  <v-layout row wrap>
    <v-flex xs12 sm6 v-for="post in userPosts" :key="post._id">
      <v-card class="mt-3 ml-1 mr-2" hover>
        <v-btn color="info" floating fab small dark @click="loadPost(post)">
          <v-icon>edit</v-icon>
        </v-btn>
        <v-btn
          color="error"
          floating
          fab
          small
          dark
          @click="handleDeleteUserPost(post)"
        >
          <v-icon>delete</v-icon>
        </v-btn>

        <v-img
          height="30vh"
          :src="post.imageUrl"
          @click="goToPost(post._id)"
        ></v-img>
        <v-card-text>{{ post.title }}</v-card-text>
      </v-card>
    </v-flex>
  </v-layout>
</v-container>

the lifecycle hooks below. it is under "methods" :

    handleDeleteUserPost(post) {
  this.loadPost(post, false);
  const deletePost = window.confirm("Do you want to delete your post?");
  if (deletePost) {
    this.$store.dispatch("deleteUserPost", {
      postId: this.postId,
    });
  }
}

the vuex store component's delete functionality. it is under "action":

 deleteUserPost: ({ state, commit }, payload) => {
  apolloClient
    .mutate({
      mutation: DELETE_USER_POST,
      variables: payload,
    })
    .then(({ data }) => {
      const index = state.userPosts.findIndex(
        (post) => post._id === data.deleteUserPost._id
      );
      const userPosts = [
        ...state.userPosts.slice(0, index),
        ...state.userPosts.slice(index + 1),
      ];
      commit("setUserPosts", userPosts);
    })
    .catch((err) => {
      console.error(err);
    });
}

mutations from "store"

 mutations: {
setPosts: (state, payload) => {
  state.posts = payload;
},
setSearchResults: (state, payload) => {
  if (payload !== null) {
    state.searchResults = payload;
  }
},
setUser: (state, payload) => {
  state.user = payload;
},
setUserPosts: (state, payload) => {
  state.userPosts = payload;
},
setLoading: (state, payload) => {
  state.loading = payload;
},
setError: (state, payload) => {
  state.error = payload;
},
setAuthError: (state, payload) => {
  state.authError = payload;
},
clearUser: (state) => (state.user = null),
clearError: (state) => (state.error = null),
clearSearchResults: (state) => (state.searchResults = []),

},