Vue 2 call method in v-for performance issue - vue.js

Question

Trying to figure out why the following code calls someFunction() 4 times instead of 1 time:
html:
<div id="app">
<div v-for="item in items" :key="item.id">
<input v-model="item.test">
<div>{{ someFunction(item) }}</div>
</div>
</div>
vue:
new Vue({
el: '#app',
data: {
items: [
{
id: 0,
test: 'test1',
},
{
id: 1,
test: 'testSomething',
},
{
id: 2,
test: 'foo',
},
{
id: 3,
test: 'bar',
},
]
},
methods: {
someFunction(item) {
console.log(item.test);
return item.test;
},
}
})
You can play with the code here
So my real world application has 30 items and a more complex someFunction(). At the moment, someFunction() is called once for every item as soon as only one item changes. But why is vue calling the function n times instead of only the one time needed?
EDIT: My problem are NOT the n function calls when the page is loaded. My problem are the n function calls when the input of only one input field is changed and thus only one function call is necessary, because all the other input values remain the same and thus the function result remains the same.

Answer 1

By using v-model on nested item in "items" you are invoking global change on "items" variable, and by that the whole html is re-rendered because there was sensed change.
You want this re-render because v-model made some changes you want to keep displaying updated data.

Answer 2

<div id="app">
<div v-for="item in items" :key="item.id"> <------- 1.LOOP here
<input v-model="item.test">
<div>{{ someFunction(item) }}</div> <--------2.FUNCTION call here
</div>
</div>
that means you go through each item in items array.
each iteration calls the method someFunction(item)
if you want a conditional executing you should <div v-if="onlyIfIwant">{{ someFunction(item) }}</div> wrap it into a v-if to prevent the function call
update
if you want conditional executes of the someFunction() then of course you have to add a flag in your objects like this:
data: {
items: [
{
id: 0,
test: 'test1',
execute: true
},
{
id: 1,
test: 'testSomething',
execute: false
},
{
id: 2,
test: 'foo',
execute: false
},
{
id: 3,
test: 'bar',
execute: true
},
]
},
your v-if just needs the following:
<div v-if="item.execute">{{ someFunction(item) }}</div>