How to call a method when data changes?

Question

Vue.js

<ul>
    <li v-for="user in users">{{ showName(user) }}<li>
</ul>

...
methods: {
    showName(user) {
        if (user.name && !user.lastname) {
            return 'Some value';
        } else if (...) {
            ...
        } else {
            return user.name;
        }
    }
}
...

In the code above, some value in the users list may change, but the showName method will not be called again. What to do? Filters can be used when I pass a specific value, but here I have an object and, by condition, I return different fields of the object.

Answer 1

Should change, add key:

<li v-for="user in users" :key="user.id">{{ showName(user) }}<li>

Answer 2

try computed

computed: {
        showName(user) {
            if (user.name && !user.lastname) {
                return 'Some value';
            } else if (...) {
            ...
            } else {
                return user.name;
            }
         }
      }

Answer 3

create() hook