Treat mentions more like a timeline.

src/components/mentions/mentions.js

@@ -1,26 +1,25 @@
-import Status from '../status/status.vue'
-// Temporary
-import { prepareStatus } from '../../modules/statuses.js'
-import { map } from 'lodash'
+import Timeline from '../timeline/timeline.vue'
 
 const Mentions = {
-  data () {
-    return {
-      mentions: []
-    }
-  },
   computed: {
     username () {
       return this.$route.params.username
+    },
+    timeline () {
+      return this.$store.state.statuses.timelines.mentions
     }
   },
   components: {
-    Status
+    Timeline
   },
   created () {
     this.$store.state.api.backendInteractor.fetchMentions({username: this.username})
       .then((mentions) => {
-        this.mentions = map(mentions, prepareStatus)
+        this.$store.dispatch('addNewStatuses', {
+          statuses: mentions,
+          timeline: 'mentions',
+          showImmediately: true
+        })
       })
   }
 }

src/components/mentions/mentions.vue

@@ -2,9 +2,7 @@
   <div class="timeline panel panel-default">
     <div class="panel-heading">Mentions</div>
     <div class="panel-body">
-      <div class="timeline">
-        <status v-for="status in mentions" :key="status.id" v-bind:statusoid="status"></status>
-      </div>
+      <Timeline v-bind:timeline="timeline" v-bind:timeline-name="'mentions'"/>
     </div>
   </div>
 </template>