update with vue.js

This is the code of my ListProducts component. I was wondering how can I pass an id by the change button to when I create my UpdateProducts.vue pull the data that is going to be changed and then make the change in the database. My method delete is inside the component ListProducts, but the Update I thought of doing in another component because I will need a form to edit the data. How can I send the data to my component Update, how do I call the component on the screen later? Thank you in advance.

<template>
  <table>
  <tr>
      <th>Nome</th>
      <th>Código de Barras</th>
      <th>Quantidade em estoque</th>
      <th>Valor unitário</th>
      <th>Ações</th>
  </tr>
  <tr v-for="prod in produtos" :key="prod.nome">
      <td>{{prod.nome}}</td>
      <td>{{prod.codigoDeBarra}}</td>
      <td>{{prod.estoque}}</td>
      <td>{{prod.valorUn}}</td>
      <th>
          <router-link to="/alterarProduto" tag="button" 
          style="width: 40%; height: 50%; display: inline-block;"
          class="btn btn-primary btn-block btn-large">
          Alterar</router-link>

          <input type="button" value="Excluir" class="btn btn-primary btn-block btn-large"  
          style="width: 40%; height: 50%; display: inline-block;" v-on:click="deletar(prod)">
      </th>
  </tr>

    const url = "http://localhost:8080/produto"

    export default {


    data(){
       return{
           produtos:[]
       }
    },



   created: function() {
       this.$http.get(url).then(function(response){
           this.produtos = response.body;
       }, function(response){
           console.log("Nao funcionou")
       })
   },



   methods: {


       deletar: function (produtoExcluir){
         this.$http.delete("http://localhost:8080/produto/"+ produtoExcluir.produto_id).then(function(response){
      var indice = this.produtos.indexOf(produtoExcluir);

      this.produtos.splice(indice, 1);
    })
  },

}
}