tr td tag, unique id to determine which taable contact I click using v-for and :id

My question is simple, I have a v-for and unique id assign in tr td tag table, when I click contenteditable, I want to fire list_of_products and recognize from js to know which id field I am changing, the dynamic suppose is ep_ + i + p.pid, ep_ is print text, i is index for v-for, and p.pid is assign from v-for. Here when I edit td contenteditable and lost focus, it will show an alert which table field I am editing. Here is my tr td table below:

<tr class="list_of_productss" v-for="p, i in all_products" :id= "ep_" + i {{p.pid}}>
<td contenteditable data-field="p_code" > {{ p.p_code }} </td>
<td contenteditable data-field="p_fullname"> {{ p.p_fullname }} </td>
<td contenteditable data-field="p_category"> {{ p.p_category }} </td>
<td contenteditable data-field="p_cost"> {{ p.p_cost }} </td>
<td contenteditable data-field="p_margin"> {{ p.p_margin }} </td>
<td contenteditable data-field="p_sell"> {{ p.p_sell }} </td>
</tr>

I prefer pure javascript so I do when lost focus in list_of_productss, javascript will know which td I am edit at:

document.getElementsByClassName('list_of_productss').addEventListener('blur', function(e) {
  //how to know which id I am typing for i here
  console.log("product_things changed");
  alert("You edit this field with index with data-field" + ) //?? for data-field and i
  });

If I do getElementsByClassName or getElementsByClassId, it must be specific id otherwise I cannot called it , how to make dynamic getElementsByClassName or getElementsByClassId to make an alert I am edit this specific field, there is total 6 columns for each row. Any help for me is a huge support.

At first:

Do not use Mustaches {{}} in the Vue attribute bindings and v-if/v-show conditions.

See, Attribute Bindings

> Mustaches cannot be used inside HTML attributes. Instead, use a
> v-bind directive

Use string concatenation or Template literals ${}

Second:

The tags <tr><td> seems to not produce onblur event. onfocusout does work.

Here is the playground with Vue.js and Vanilla Js event handling.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const { createApp, ref, onMounted } = Vue

const App = {
  setup() {
    const all_products = ref([
      { p_code: 1, p_fullname: "One"},
      { p_code: 2, p_fullname: "Two"}
    ]);
    
    onMounted( () => {
      let el = document.getElementsByClassName('list_of_productss');
      for(var i = 0; i< el.length; i++) {
        el[i].addEventListener('focusout', function(e) {
          //how to know which id I am typing for i here
          console.log("product_things changed: " + e.target.id);
        });      
      }
    })
    
    const handleBlur = (e) => {
      console.log("handleBlur: " + e.target.id)
    }
    
    const handleFocusout = (e) => {
      console.log("handleFocusout: " + e.target.id)
    }
    
    return {
      all_products, handleBlur, handleFocusout
    }
  }
}

const app = createApp(App)
app.mount('#app')

<!-- language: lang-css -->

#app { line-height: 1.75; }
[v-cloak] { display: none; }
td { padding: 30px;}

<!-- language: lang-html -->

<div id="app" v-cloak>
<table border=1>
  <tr class="list_of_productss" v-for="p, i in all_products" :id= "`ep_${i}`" @blur="handleBlur" @focusout="handleFocusout" >
<td contenteditable data-field="p_code" :id= "`ep_code_${i}`" > {{ p.p_code }} </td>
<td contenteditable data-field="p_fullname" :id= "`ep_fn_${i}`"> {{ p.p_fullname }} </td>
</tr>
</table>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<!-- end snippet -->