Q:

Replace the inside part only of the clicked element

Suppose I have the following list:

export default {
  data() {
    return {
      items: {
        Apple,
        Orange,
        Appricot
      }
    }
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<ul>
  <li v-for=item in items>{{item}}</li>
</ul>

Now, I want to do the following:
If I click on one of the list items, I want its inner side to be replaced with some info (let's say, some text, like 'Tomato'). How can I do that without replacing the insides of all of the list items?

A:

The below codes will work for you 
template:
<ul>
  <li v-for="(item, index) in items" v-on:click="changeText(index)">{{item}}</li>
</ul>

methods:
changeText: function (index) {
     this.items[index]="Tomato";
}

