Vue: Conflicting method and data names.

[crswll]

I'm not sure this is a real issue but I figured I'd mention it either way.

When there's a method with the same name as a data property they conflict in a weird way. The method call works at first, then doesn't.

Here's an example:

new Vue({
    el: '#app',
    data: {
        id: 2,
        name: "Ted",
        color: "#000"
    },
    methods: {
        color: function () {
            this.$data.color = '#f00';
        }
    }
});

<div id="app">
    <div v-attr="data-id: id" v-style="color: color" v-on="click:color()">
        {{ name }}
    </div>
</div>

Here it is in a fiddle: http://jsfiddle.net/gk727vge/3/

[yyx990803]

Both data properties and methods will be set on the instance, so the short answered is: don't use conflicting names :)

[crswll]

Makes sense! I just wanted to make sure it wasn't something more insidious.