Version

3.1.4

Reproduction link

[https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8aW5wdXQgdHlwZT1cInRleHRcIiB2LW1vZGVsPVwiZmluZEN1cnJlbmN5T2ZmZXIoKS5wcmljZVwiIC8 XG48L3RlbXBsYXRlPlxuXG48c2NyaXB0PlxuZXhwb3J0IGRlZmF1bHQge1xuICBkYXRhKCkge1xuICAgIHJldHVybiB7XG4gICAgICB0aGVPZmZlcnM6IFtcbiAgICAgICAge3ByaWNlOiAxMH0sXG4gICAgICAgIHtwcmljZTogMjB9XG4gICAgICBdXG4gICAgfTtcbiAgfSxcbiAgXG4gIG1ldGhvZHM6IHtcbiAgICBmaW5kQ3VycmVuY3lPZmZlcigpIHtcbiAgICAgIHJldHVybiB0aGlzLnRoZU9mZmVyc1swXTtcbiAgICB9XG4gIH1cbn1cbjwvc2NyaXB0PiJ9](https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8aW5wdXQgdHlwZT1cInRleHRcIiB2LW1vZGVsPVwiZmluZEN1cnJlbmN5T2ZmZXIoKS5wcmljZVwiIC8 XG48L3RlbXBsYXRlPlxuXG48c2NyaXB0PlxuZXhwb3J0IGRlZmF1bHQge1xuICBkYXRhKCkge1xuICAgIHJldHVybiB7XG4gICAgICB0aGVPZmZlcnM6IFtcbiAgICAgICAge3ByaWNlOiAxMH0sXG4gICAgICAgIHtwcmljZTogMjB9XG4gICAgICBdXG4gICAgfTtcbiAgfSxcbiAgXG4gIG1ldGhvZHM6IHtcbiAgICBmaW5kQ3VycmVuY3lPZmZlcigpIHtcbiAgICAgIHJldHVybiB0aGlzLnRoZU9mZmVyc1swXTtcbiAgICB9XG4gIH1cbn1cbjwvc2NyaXB0PiJ9)

Steps to reproduce

Short description of the issue

Cannot use v-model with the result of a function

This used to work in vue 2

Details of the problem in my app

I have an app that was built using vue 2 in this app i have something like this

As you can see in this template i'm using a method findCurrencyOffer() to get an object out of theOffers and then use the price property on the offer with the v-model This worked fine on vue 2 but in vue 3 i get this error

VueCompilerError: v-model value must be a valid JavaScript member expression.

<th v-for="currency in currencies">
    <input type="text" v-model="findCurrencyOffer(currency.id).price">
</th>

    methods: {
        findCurrencyOffer(currency_id) {
            return _.find(this.theOffers, {currency_id, participant_group_id: null, country_id: null});
        }
    }

What is expected?

Bind the input value on the price attribute of the object returned by the findCurrencyOffer() function

What is actually happening?

I get this error when compiling the code

VueCompilerError: v-model value must be a valid JavaScript member expression.

Same code used to work with vue 2

I saw that a similar issue was already opened https://github.com/vuejs/vue-next/issues/3910 and then closed due to a fix but that fix does not seem to solve my issue. In the other issue the author is trying to access a 2D array directly within the v-model but in my case i'm using a function to return an object

duplicate of #3993

Closing as duplicate