diff --git a/src/components/Publish.vue b/src/components/Publish.vue
index cc1aad1..ac1fac5 100644
--- a/src/components/Publish.vue
+++ b/src/components/Publish.vue
@@ -3,6 +3,7 @@
     <q-card-section>
       <q-form @submit="sendPost">
         <q-input
+          ref="input"
           v-model="text"
           autogrow
           autofocus
@@ -44,9 +45,27 @@ export default {
 
   data() {
     return {
-      text: ''
+      text: '',
     }
   },
+
+  computed: {
+    textarea() {
+      return this.$refs.input.$el.querySelector('textarea')
+    },
+    mentions() {
+      return this.createMentionsProvider()
+    }
+  },
+
+  mounted() {
+    this.mentions.attach(this.textarea)
+  },
+
+  beforeUnmount() {
+    this.mentions.detach(this.textarea)
+  },
+
   methods: {
     async sendPost() {
       if (!this.text.length) {
diff --git a/src/components/Reply.vue b/src/components/Reply.vue
index c2cfd93..2a384d9 100644
--- a/src/components/Reply.vue
+++ b/src/components/Reply.vue
@@ -1,6 +1,7 @@
 <template>
   <q-form class="px-24" @submit="sendReply">
     <q-input
+      ref="input"
       v-model="text"
       autogrow
       autofocus
@@ -32,6 +33,23 @@ export default {
     }
   },
 
+  computed: {
+    textarea() {
+      return this.$refs.input.$el.querySelector('textarea')
+    },
+    mentions() {
+      return this.createMentionsProvider()
+    }
+  },
+
+  mounted() {
+    this.mentions.attach(this.textarea)
+  },
+
+  beforeUnmount() {
+    this.mentions.detach(this.textarea)
+  },
+
   methods: {
     async sendReply() {
       if (!this.text.length) {