Vue js nested instances (nested ones won't work)

[IntellectProductions]

I have something like this:

<header>
   <vue-component>
      STUFF
   </vue-component>
</header>

The header has a vue instance attached to it. Then I have another vue instance in it. Well I did what I have been doing and turned that into a component, but for some odd reason, the data doesn't seem to be working properly.

Here is my fiddle: http://jsfiddle.net/9qqqcv93/

It's doing the mouseenter and mouseleave console.log's I have, but it won't add or remove the classes I have in the data object. I'll be nesting components quite regularly especially since some page wrappers will have a vue instance on them as well.

Thanks for any help!

[IntellectProductions]

OH I forgot to return {} the data since it's a component. HOWEVER, I'm doing this in Wepack and whenever I put the module.exports = Vue.component('locator', {}); around it, it won't even function. The locator component disappears out of my layout.

I have this in my main app.js file that Webpack compiles:

require('./instances/pages/home/Header');
require('./instances/locator/DealerLocator');

Header.js

module.exports = new Vue({
    el: 'header',

    data: {
        minify: false
    },

    methods: {
        adjustHeader: function() {
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

            this.minify = ( scrollTop > 0 ? true : false );
        }
    }
});

DealerLocator.js

module.exports = Vue.component('locator', {
    inherit: true,
    template: '',
    replace: false,

    data: function() {
        return {
            slide: 'slideUp',
            active: 'inactive'
        }
    },

    attached: function() {
        var self = this;

        $(this.$el).on({
            mouseenter: function() {
                self.slide = 'slideDown';
                self.active = 'activated';

                console.log(self.slide);
                console.log(self.active);
            },
            mouseleave: function() {
                self.slide = 'slideUp';
                self.active = 'inactive';

                console.log(self.slide);
                console.log(self.active);
            }
        });
    }
});

[simplesmiler]

Vue.component does not return the component. It registers the component under a certain name in global namespace of Vue components. If you need to return a component, you probably want to use Vue.extend instead. Update: or just return a component description, it may be more convenient.