Vue data, computed, and methods - vue.js

Question

Wondering if I should directly update a potentially large array in data() using a method, or instead, have the method set another primitive property in data() and use computed to return an altered array using that? Examples of both approaches below:
Approach #1:
data() {
return {
users: [
{
name: 'alice'
selected: true
},
name: 'bob'
selected: false
// ...
methods: {
handleSelection(selectedIndex) {
this.users = this.users.map((item, index) => {
item.selected = selectedIndex === index ? true : false;
return item;
});
}
Approach #2:
data() {
return {
selectedIndex: 0,
users: [
{
name: 'alice'
selected: true
},
name: 'bob'
selected: false
// ...
computed: {
usersSelected() {
return this.users.map((item, index) => {
item.selected = this.selectedIndex === index ? true : false;
return item;
});
}
//...
methods: {
handleSelection(selectedIndex) {
this.selectedIndex = selectedIndex;
}
Is one better than the other or any additional suggestions/improvements? Thanks!

Answer 1

You should use a computed property. That way, you don't need to care about remembering to call various methods, to keep data in sync.
Your computed property can be made a bit more simple, with your requirements.
new Vue({
el: '#app',
data: {
selectedUserIndex: null,
users: [{
name: 'Mark',
id: 1
},
{
name: 'John',
id: 2
},
{
name: 'Evan',
id: 3
}
]
},
computed: {
selectedUser() {
return this.selectedUserIndex >= 0
? this.users[this.selectedUserIndex]
: null
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<p>
Selected user:
<span v-if="selectedUser">{{selectedUser.name}}</span>
<em v-else>No user selected</em>
</p>
<ul>
<li #click="selectedUserIndex = index" v-for="(user, index) in users" :key="user.id">
{{user.name}}
</li>
</ul>
</div>