Logic for vue counter - what is the right approach?

Question

Vue.js

Hello.
I want to make a counter, about the principles of the logic of which I will write immediately in the code:

new Vue({
  el: "#app",
  data: {
    items: [ // эти элементы вывожу в шаблоне циклом потом
      { title: 'click' },
      { title: 'click' },
      { title: 'click' }
    ],
    counter: 0 // на это значение хочу повесить инкремент, при клике на ту или иную кнопку,
//которые отрисуются потом в цикле. при этом counter 
//в шаблоне должен увеличиваться только там, где произошел клик, 
//а не во всех местах
  },
  methods: {
    goUp: function() {
      return this.counter++;
    },
    listRender: function() {
      return this.items;
    }
  }
})

The question is that you want to use exactly the construction that is higher, and not do something like:

el: "#app",
  data: {
    items: [
      { title: 'click',
        counter: 0
                        },
      { title: 'click',
        counter: 0
                        },
      { title: 'click',
        counter: 0
                        }
    ]
  },

... and then increment each counter from items.
Is it possible to somehow set the counter once in data to increment when clicking on each element from the items array?
My terrible code
Thank you.

Answer 1

If you want independent counters, each one should have a separate counter property. What exactly you do not like about this is not very clear. Need to manually assign a property to each element? - well, you can bypass the elements in the cycle .