JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <ul>
    <li v-for="item in fruit" :id="item.id" ref="branid">{{item.name}}</li>
  </ul>
</div>

JavaScript

var app = new Vue({
  el: "#app",
  data: {
    fruit: [{
      id: 21,
      name: 'Peach'
    }, {
      id: 10,
      name: 'Apple'
    }, {
      id: 15,
      name: 'Lemon'
    }],
    branid: ''
  },
  mounted() {
  console.log(this.$refs.branid.map(li => li.id))
  }
})