I iterate 2 array in a v-for with fields that have a relation

My opinion is to add a computed property to not overload the template. The advisable thing is not to put too much logic in the templates.

JS

  computed: {
    productosConEstado: function () {
      // utilizando se map agrega la propiedad estado por cada elemento del array productos
      let productosConEstado = this.productos.map(p => {
        p.estado = this.estadoProducto.find( (el) => { return el.producto_id === p.id } ).status
        return p
      })
      return productosConEstado
    }
  }

HTML

  <table class="table">
    <thead>
      <tr>
        <th>id</th>
        <th>name</th>
        <th>estado</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="pro in productosConEstado" :key="pro.id">
        <td>{{pro.id}}</td>
        <td>{{pro.name}}</td>
        <td>{{pro.estado}}</td>
      </tr>
    </tbody>
  </table>

It's easier if you combine the two arrangements into one. That way, you can go through the arrangement obtained with a v-for. If those arrangements are obtained with an Ajax request, the moment you receive the response from the server, you transform them into something like this:

productos:[
   {id:1, name: 'gaseosa', status: 'activo'},
   {id:2, name: 'carne', status: 'inactivo'},
   {id:3, name: 'pasta', status: 'activo'},
   {id:4, name: 'arroz', status: 'inactivo'},
   {id:5, name: 'queso', status: 'activo'}
]

Another solution, which I think is more correct and responds better to your question, is to use the "find" method for fixes.

Your code would look like this:

<tr v-for="pro in productos" :key="pro.id">
   <td>{{ pro.id }}</td>
   <td>{{ pro.name }}</td>
   <td>{{ estadoProducto.find(el => el.producto_id == pro.id).status }}</td>
</tr>

But if you have to support the infamous IE, the mentioned method is not supported by that browser. However, there is a polyfill on this page that you can apply: Array.prototype .find () and, in that case, you should replace the arrow functions with common functions. It would be like that without functions arrow:

<tr v-for="pro in productos" :key="pro.id">
   <td>{{ pro.id }}</td>
   <td>{{ pro.name }}</td>
   <td>{{ estadoProducto.find(function(el) { return el.producto_id == pro.id; } ).status }}</td>
</tr>

Greetings!

I'll leave another answer, but Pedro's is valid.

We are simply going to do the same, but using VUE directly. in this way we do not have to add any external libraries and we do not depend on browser problems since it will only be transpiled to something compatible.

And besides, it does exactly the same thing, since the find method runs through the array and only shows the element that fulfills that condition. But what would happen if two or more comply?

 <tr v-for="pro in productos" :key="pro.id">
     <td>{{pro.id}}</td>
     <td>{{pro.name}}</td>

     <td v-for="e in estadoProducto" :key="e.id">
         <span v-if="e.producto_id = pro.id">
             {{e.status}}
         </span>
     </td>
     </tr>