pedi2/resources/js/components/ProductoRow.vue

<template>
	<tr>
            <td>{{ this.producto.nombre }}</td>
            <td class="has-text-right">{{ this.producto.pivot.cantidad }}</td>
            <td class="has-text-right">{{ Math.ceil(this.producto.pivot.total) }}</td>
            <td><button @click.capture="seleccionarProducto(producto)" class="button is-warning">
                <span class="icon">
                    <i class="fas fa-edit"></i>
                </span>
            </button></td>
            <td><button @click.capture="eliminarProducto(producto)" class="button is-danger">
                <span class="icon">
                    <i class="fas fa-trash-alt"></i>
                </span>
            </button></td>
    </tr>
</template>

<script>
	export default {
		props: {
	        producto: Object
	    },
	    methods: {
	        seleccionarProducto(producto) {
	            Event.$emit("producto-seleccionado",producto);
	        },
	        eliminarProducto(producto) {
	            Event.$emit("sync-subpedido", 0, this.producto.id);
	            Event.$emit("sync-subpedido");
	        }
        }
	}
</script>