dynamically add a property to an object in an array - vue.js

Question

I am trying to add a property in an object inside an array, and I just cant make it work:
So I am passing an array to Names.vue which contains ['John', 'Jane'], and I am trying to show some icons next to the name when the user hover over that name:
A live example of the problem
Names.vue
<template>
<div>
<ul>
<li v-for="(name, index) in names" :key="index">
<span #mouseenter="name.showIcons = true" #mouseleave="name.showIcons = false">{{ name }}</span>
<span v-if="name.showIcons" style="margin-left:10px">icons</span>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
names: Array
}
};
</script>
But this doesn't work? Why?

Answer 1

Alternatively - you can use this.$set:
<template>
<div id="app">
<Names :names="names"/>
</div>
</template>
<script>
import Names from "./components/Names";
export default {
name: "App",
components: {
Names
},
data() {
return {
names: [{ name: "John" }, { name: "Jane" }]
};
}
};
</script>
<template>
<div>
<ul>
<li v-for="(name, index) in names" :key="index">
<span
#mouseenter="setIconsState(index, true)"
#mouseleave="setIconsState(index, false)"
>{{ name.name }}</span>
<span v-if="name.showIcons" style="margin-left:10px">icons</span>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
names: Array
},
methods: {
setIconsState(index, isShow) {
this.$set(this.names[index], `showIcons`, isShow);
}
}
};
</script>