title: Get data from mixin Vue.js
body: <p>I have a Vue component that <code>requires</code> a file that is a Vue mixin. The file that is required is part of a vendor package so I cannot modify that file. I need to get the <code>notifications</code> prop from the mixin. The end result is that I am going to access the <code>notifications</code> object and get the amount of read notifications so that I display this count as a computed property. It seems that using <code>this.notifications</code> does not work. How can I do this?</p>
  
  <p>Here is my component:</p>
  
  <pre><code>var base = require('notifications/notifications');
  
  Vue.component('spark-notifications', {
  
      mixins: [base],
  
  });
  </code></pre>
  
  <p>Here is the <code>notifications</code> file that was required in the previous component:</p>
  
  <pre><code>module.exports = {
      props: ['notifications', 'hasUnreadAnnouncements', 'loadingNotifications'],
  
      /**
       * The component's data.
       */
      data() {
          return {
              showingNotifications: true,
              showingAnnouncements: false
          }
      },
  
  
      methods: {
          /**
           * Show the user notifications.
           */
          showNotifications() {
              this.showingNotifications = true;
              this.showingAnnouncements = false;
          },
  
  
          /**
           * Show the product announcements.
           */
          showAnnouncements() {
              this.showingNotifications = false;
              this.showingAnnouncements = true;
  
              this.updateLastReadAnnouncementsTimestamp();
          },
  
  
          /**
           * Update the last read announcements timestamp.
           */
          updateLastReadAnnouncementsTimestamp() {
              this.$http.put('/user/last-read-announcements-at')
                  .then(() =&gt; {
                      this.$dispatch('updateUser');
                  });
          }
      },
  
  
      computed: {
          /**
           * Get the active notifications or announcements.
           */
          activeNotifications() {
              if ( ! this.notifications) {
                  return [];
              }
  
              if (this.showingNotifications) {
                  return this.notifications.notifications;
              } else {
                  return this.notifications.announcements;
              }
          },
  
  
          /**
           * Determine if the user has any notifications.
           */
          hasNotifications() {
              return this.notifications &amp;&amp; this.notifications.notifications.length &gt; 0;
          },
  
  
          /**
           * Determine if the user has any announcements.
           */
          hasAnnouncements() {
              return this.notifications &amp;&amp; this.notifications.announcements.length &gt; 0;
          }
      }
  };
  </code></pre>
  
  <p>The beginning of the Laravel blade template:</p>
  
  <pre><code>&lt;spark-notifications
              :notifications="notifications"
              :has-unread-announcements="hasUnreadAnnouncements"
              :loading-notifications="loadingNotifications"
              inline-template&gt;
  </code></pre>
  
  <p>Here is the method in the <code>spark.js</code> which gets the notifications:</p>
  
  <pre><code>    data: {
              user: Spark.state.user,
              teams: Spark.state.teams,
              currentTeam: Spark.state.currentTeam,
  
              loadingNotifications: false,
              notifications: null,
  
              supportForm: new SparkForm({
                  from: '',
                  subject: '',
                  message: ''
              })
          },    
  
          getNotifications() {
                  this.loadingNotifications = true;
  
                  this.$http.get('/notifications/recent')
                      .then(response =&gt; {
                          this.notifications = response.data;
  
                          this.loadingNotifications = false;
                      });
              },
  </code></pre>
  
  <p>And, here is where everything is bootstrapped together <code>app.js</code>:</p>
  
  <pre><code>require('spark-bootstrap');
  require('./components/bootstrap');
  
  var app = new Vue({
      mixins: [require('spark')]
  });
  </code></pre>