diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index b400ccc32..df94c327b 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -167,6 +167,7 @@ import {
 } from '~/components/utils/PostHelpers'
 import PostQuery from '~/graphql/PostQuery'
 import { groupQuery } from '~/graphql/groups'
+import PostMutations from '~/graphql/PostMutations'
 import links from '~/constants/links.js'
 import GetCategories from '~/mixins/getCategoriesMixin.js'
 import postListActions from '~/mixins/postListActions'
@@ -308,6 +309,24 @@ export default {
       this.post.isObservedByMe = comment.isPostObservedByMe
       this.post.observingUsersCount = comment.postObservingUsersCount
     },
+    toggleObservePost(postId, value) {
+      this.$apollo
+        .mutate({
+          mutation: PostMutations().toggleObservePost,
+          variables: {
+            value,
+            id: postId,
+          },
+        })
+        .then(() => {
+          const message = this.$t(
+            `post.menu.${value ? 'observedSuccessfully' : 'unobservedSuccessfully'}`,
+          )
+          this.$toast.success(message)
+          this.$apollo.queries.Post.refetch()
+        })
+        .catch((error) => this.$toast.error(error.message))
+    },
     toggleNewCommentForm(showNewCommentForm) {
       this.showNewCommentForm = showNewCommentForm
     },