title: Updating vue file on changes - Laravel Echo Pusher Notifications
body: <p>So for the past few days i have tried to make this template auto reload when something new has happened. That is when "Notifications" has been modified, either by new entry has ben added or that a notification has been marked as read.</p>
  
  <p>I use a dropdown to show the results, and right now i have to reload the whole page when something happens. Which isn't very nice for a modern application.</p>
  
  <p>PS. I'm completely new to Vue, since this integration with laravel notifications.</p>
  
  <p>This is my .vue file (and  you can see i have tried a few things myself without success)</p>
  
  <pre><code>&lt;template&gt;
      &lt;li class="dropdown"&gt;
          &lt;a href="#" class="dropdown-toggle icons" data-toggle="dropdown" role="button"
             aria-haspopup="true" aria-expanded="false"&gt;
              &lt;span class="badge badge-dark badge-corner fs-11"&gt;{{ notifications.length }}&lt;/span&gt;
              &lt;i class="fas fa-bell fs-15" style="color: #444;"&gt;&lt;/i&gt;
          &lt;/a&gt;
          &lt;ul
              class="dropdown-menu dropdown-menu-right notify-drop"&gt;
              &lt;li&gt;
                  &lt;div class="notify-drop-title"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-10"&gt;Notifikationer (&lt;b&gt;{{ notifications.length }}&lt;/b&gt;)&lt;/div&gt;
                          &lt;div class="col-2 text-right"&gt;
                              &lt;button class="rIcon allRead"
                                      data-tooltip="tooltip"
                                      data-placement="bottom"
                                      title="Markera alla som lästa"&gt;&lt;i
                                  class="fa fa-bullseye fs-12"&gt;&lt;/i&gt;
                              &lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- end notify title --&gt;
                  &lt;!-- notify content --&gt;
                  &lt;div class="drop-content"&gt;
                      &lt;div class="thisItem" v-for="notification in notifications" :key="notification.id"&gt;
                          &lt;div class="row pl-10"&gt;
                              &lt;div class="col-1"&gt;
                                  &lt;div
                                      v-if="notification.data.type === 'friend' || notification.data.type === 'friendAccept'"&gt;
                                      &lt;i class="fas fa-heart fs-25 primary mt-5"&gt;&lt;/i&gt;
                                  &lt;/div&gt;
                                  &lt;div v-if="notification.data.type === 'friendDeny'"&gt;
                                      &lt;i class="fas fa-heart-broken fs-25 primary mt-5"&gt;&lt;/i&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="col-10 ml-5"&gt;
                                  &lt;button class="float-right rIcon mr-1" data-toggle="tooltip"
                                          data-placement="top" title="Markera som läst"
                                          v-on:click="MarkAsRead(notification)"&gt;
                                      &lt;i class="fa fa-bullseye fs-12"&gt;&lt;/i&gt;
                                  &lt;/button&gt;
  
                                  &lt;a class="fs-14 m-0" style="text-transform: none;" :href="'/profile/' + notification.data.accessurl"&gt;{{
                                      notification.data.fromuser }}&lt;/a&gt;
                                  &lt;span class="fs-12 m-0 text-muted"&gt;{{ notification.data.message }}&lt;/span&gt;
  
                                  &lt;div v-if="notification.data.type === 'friend'"&gt;
                                      &lt;button type="button" class="btn btn-primary btn-sm"
                                              v-on:click="AcceptFriend(notification)"&gt;Acceptera
                                      &lt;/button&gt;
                                      &lt;button type="button" class="btn btn-primary btn-sm"
                                              v-on:click="DenyFriend(notification)"&gt;Neka
                                      &lt;/button&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="notify-drop-footer text-center"&gt;
                      &lt;a href=""&gt;&lt;i class="fa fa-eye"&gt;&lt;/i&gt; Visa Alla&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          props: ['notifications'],
          methods: {
              MarkAsRead: function (notification) {
                  const data = {
                      id: notification.id
                  };
                  const self = notification;
                  axios.post('/notification/read', data).then(response =&gt; {
                      //self.id = '';
                      //self.$forceUpdate();
                      //self.notification += 1;
                      //self.setState({notification: response.data});
                      //self.data.fromuser = '';
                      //self.data.message = response.data;
                      //this.notifications.splice(notification,1);
                      console.log(response.data);
                  });
              },
              AcceptFriend: function (notification) {
                  const data = {
                      id: notification.id,
                      friendid: notification.data.itemid,
                      fromuserid: notification.data.fromuserid
                  };
  
                  axios.post('/notification/acceptFriend', data).then(response =&gt; {
                      console.log(response.data);
                  });
  
                  axios.post('/notification/read', data).then(response =&gt; {
                      console.log(response.data);
                  });
              },
              DenyFriend: function (notification) {
                  const data = {
                      id: notification.id,
                      friendid: notification.data.itemid,
                      fromuserid: notification.data.fromuserid
                  };
  
                  axios.post('/notification/denyFriend', data).then(response =&gt; {
                      console.log(response.data);
                  });
  
                  axios.post('/notification/read', data).then(response =&gt; {
                      console.log(response.data);
                  });
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>My app.js</p>
  
  <pre><code>Vue.component('notification', require('./components/Notification.vue'));
  
  const app = new Vue({
      el: '#app',
      data: {
          notifications: ''
      },
      created() {
          axios.post('/notification/get').then(response =&gt; {
              this.notifications = response.data;
          });
  
          var userId = $('meta[name="userId"]').attr('content');
          Echo.private('App.User.' + userId).notification((notification) =&gt; {
              this.notifications.push(notification);
          });
      },
      computed: {
          notifications: function () {
              return this
          }
      }
  });
  </code></pre>
  
  <p>Thank you in advance for anyone who can help me solve this!</p>