Property or method is not defined on the instance but referenced during render

[fracasula]

Hi there,

I'm having issues with Karma/Webpack I think, I'm getting a warning when mounting a component like this:

import HelloInjector from '!!vue-loader?inject!./../../../src/components/Hello.vue';

const getComponentWithMockedHttp = get => HelloInjector({
    './../modules/http': {
        get
    }
});

const component = getComponentWithMockedHttp(() => new Promise(
    resolve => resolve('All fine here')
));

const vm = new Vue(component).$mount();

vm.helloMethod().then(message => {
    expect(vm.message).toEqual(message);
    expect(vm.message).toBe('All fine here');
    expect(vm.computedMessage).toBe('All fine here!!!');
    done();
});

There I get a warning (and a failure also) on the computed property but only if such property is in the parent class. If I move the computed property in the child class everything works fine and I get no warnings. Also it happens only when running my specs through Karma/Webpack, I don't get any warning when running it through the webpack-dev-server.

I committed the whole thing here. In this pull request you can see how the error goes away by just moving the computed property from the parent class into the child one.

Steps to reproduce:

1. make dbuild (it builds the docker image on top of node:slim)
2. make install (runs an npm install mounting the volume so you get node_modules in the host)
3. make test (runs karma with Chrome headless)

To run it in your browser instead just do make run and go to localhost:8080.

What am I missing?

[ktsn]

You need also decorate super class with @Component. See: https://github.com/vuejs/vue-class-component/blob/master/test/test.ts#L168-L188

[fracasula]

I see, thanks, that way it works just fine. I wonder why it doesn't show any warnings when running it without Karma though. The code is exactly the same.