Как получить уникальное значение атрибута id во VUE js

let app = new Vue({
    el: '#app',
    data: {
        balance: 1800,
        items: ['a', 'b', 'c', 'd', 'e'],
        productsPrice: [0],
        products: [
            {
                name: 'Bánh Mì',
                price: '200',
                img: 1,
                id: 0
            },
            {
                name: 'Nước Suối',
                price: '100',
                img: 2,
                id: 1
            },
            {
                name: 'Sim Điện Thoại',
                price: '1000',
                img: 3,
                id: 2
            },
            {
                name: 'Can Xăng',
                price: '1500',
                img: 1,
                id: 3
            },
            {
                name: 'Bộ Sửa Xe',
                price: '500',
                img: 2,
                id: 4
            },
            {
                name: 'Bộ Đàm',
                price: '3000',
                img: 3,
                id: 5
            },
        ],
        bucket: [
            {
                position: 0,
                name: 'Banh Mi',
                price: 400
            },
            {
                position: 1,
                name: 'Banh Mi',
                price: 400
            },
        ],
    },

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div 
v-for='(product, index) in products' 
class="product">
  <div class="content-for-product">
    <div>
      <span class="name-product">
        {{product.name}}
      </span>
    </div>
    <img :src="`./assets/img/products/${product.img}.png`">
    <div>
      <span class="name-product">
        {{product.price}} RD
      </span>
    </div>
  </div>
  <div 
   class="btn-add-bucket" 
   v-bind:id="product.id" 
   ref="textName" 
   v-on:click="addItem"
   :key="index"
   :id="index">
  </div>
</div>