[Vuejs]-Vuejs span rows matches some condition

Not sure if I understood your problem, but I hope this helps (Codepen):

Template:

<div id="app">
  <table>
    <tr>
      <th>PO Number</th>
      <th>Product name</th>
    </tr>

    <tr v-for="(products, po_number) in productsGroupedByPoNumber">
      <td v-text="po_number" />
      <td>
        <p v-for="product in products" v-text="product" />
      </td>
    </tr>
  </table>
</div>

Javascript:

new Vue({
  el: "#app",

  data: {
    products: [
      { name: "Product #1", po_number: "PO #1" },
      { name: "Product #2", po_number: "PO #1" },
      { name: "Product #3", po_number: "PO #1" },
      { name: "Product #4", po_number: "PO #2" },
      { name: "Product #5", po_number: "PO #2" },
      { name: "Product #6", po_number: "PO #3" },
    ]
  },

  computed: {
    productsGroupedByPoNumber() {
      return this.products.reduce((carry, product) => {
        if (!carry.hasOwnProperty(product.po_number)) {
          carry[product.po_number] = [];
        }

        carry[product.po_number].push(product.name);

        return carry;
      }, {});
    }
  }
});