Vue-class-component: Component with v-model and emit produces warning "Avoid mutating a prop directly..."

[aleksanderzubkov]

Very simple component with v-model and $emit:

import * as Vue from 'vue';
import Component from 'vue-class-component';
@Component({
    name: 'test-input',
    template: `<input
        type="text"
        v-bind:value="value"
        v-on:input="updateValue($event.target.value)"
        />`,
    props: {
        value: String
    }
})
export class TestInputComponent extends Vue {
    updateValue(value) {
        this.$emit('input', value);
    }
}

Usage:

<test-input v-model="model.test" />

And in dev mode it produces warning:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"

Plain JS version of the same component (without typescript and without vue-class-component) do not produce any warnings.

How to create Typescript v-model component without warnings? Is it vue-class-component bug or my mistake in code?

I've tried many combinations of props, computed, methods, vue-property-decorator etc... All results to warning.

vue: 2.2.6
vue-class-component: 5.0.0,
vue-property-decorator: 4.0.0

[ktsn]

Can't reproduce. Can you provide a complete reproduction?
https://jsfiddle.net/ktsn/0ktwh1p6/

[aleksanderzubkov]

May be it's because of babel in your reproduction?
My problem is with typescript. From my package.json:
"ts-loader": "^2.0.3",
"tslint": "^5.0.0",
"tslint-loader": "^3.5.2",
"typescript": "^2.2.2",
"webpack": "^2.2.1"

[aleksanderzubkov]

I found the problem: for some reason webpack initialized Vue module twice. I fixed it and now it's ok.
Sorry for inconvenience.

[ktsn]

OK, thanks.

[xgvargas]

@aleksanderzubkov, I'm having the same behaviour in here.

//- pug template
.dhCheckbox.cursor-pointer.no-outline.inline(tabindex="0")
    input(type="checkbox" v-model="internal")

# coffee script
module.exports =
    name: 'dhCheckbox'

    props: ['value']

    computed:
        internal:
            get: -> @value
            set: (v) ->
                if @value != v
                    @$emit 'input', v

It works as expected, but gives me the same warning. If I comment out the last line ($emit), the warning stops (and also breaks my component).

I noticed the browser logs the following message twice when I reload the page:

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.

This makes me think my webpack is loading Vuejs twice like you have reported.

Can you share how you got that issue fixed?