title: Vuejs - Multiple components use same mixin (only last one gets fired)
body: <p>I have around four components using the same mixin that I created. In order to get the dimensions of <code>this.$el</code> (the CORRECT ones), I had to implement <code>window.onload = function()</code> mixin. My mixin looks like this:</p>
  
  <pre><code>module.exports = {
      methods: {
          onPageload: function( callback ) {
              window.onload = function() {
                  callback();
              }
          }
      }
  };
  </code></pre>
  
  <p>Very simple. However, more than one component uses it. I'm creating a slideshow. My Slides component uses it, my Slide component, my Thumb component, and my overall Slider component.
  HOWEVER only the very last one to <code>compile</code> fires it.</p>
  
  <pre><code>var pageLoad = require('../../mixins/Pageload');
  
  module.exports = {
      template: require('./templates/thumbs.html'),
  
      replace: true,
  
      data: function() {
          return {
              style: {
                  width: 800
              },
              count: 2
          }
      },
  
      computed: {
          styles: function() {
              return {
                  width: this.style.width + 'px'
              }
          }
      },
  
      mixins: [pageLoad],
  
      props: ['count'],
  
      attached: function() {
          this.onPageload( this.setDimensions );
      },
  
      methods: {
          // Set dimensions for the first time
          setDimensions: function() {
              console.log('setting thumb');
              this.style.width = this.$parent.slideWidth;
          }
      }
  };
  </code></pre>
  
  <p>My other "parent" components do the same thing to set their dimensions. This is the MOST inner child of the entire thing.. it's the ONLY one that fires. If I erase it from here, the next child up is the only one that fires. They are overwriting each other in a way. My vue instance is here:</p>
  
  <pre><code>new Vue({
      el: '#slideshow',
  
      components: {
          'sliderarrows': require('../../components/slider/SliderArrows'),
          'sliderthumb': require('../../components/slider/SliderThumb'),
          'sliderslide': require('../../components/slider/SliderSlide'),
          'slides': require('../../components/slider/SliderSlides'),
          'slider': require('../../components/slider/Slider'),
          'thumbnails': require('../../components/slider/SliderThumbs')
      }
  });
  </code></pre>
  
  <p>So the thumbnails component is the only one that's firing the mixin method. I feel like it's something to do with the whole compilation of <code>require()</code> but I'm not sure since I'm not that familiar with the Node.js module format.</p>
  
  <p>Thanks for any help on how to get this to work!</p>