Get another component variable for editing

Question

I’m using Laravel + vuejs in an application I’m using to study both frameworks.

I have a following problem:

I am displaying a modal after clicking on "edit" and wanted to get the values that passes in this function in my modal.

It would send values and one Component.Vue to another.

<template>
  <div class="container">
   <div class="row justify-content-center">
    <div class="col-md-8">
     <div class="card">
      <div class="card-header">
        <button class="btn btn-primary btn-sm" @click="novo()">Novo</button>
      </div>
      <div style="margin-left: 25%; padding-top: 5%">
        <h3>Lista dos alunos cadastrados</h3>
      </div>
      <div class="card-body">
        <table class="table table-striped table-hover mb-0">
          <thead>
            <tr>
              <th class="text-center">Nome</th>
              <th class="text-center">CPF</th>
              <th class="text-center">Cidade</th>
              <th></th>
            </tr>
          </thead>
          <tbody v-for="item in alunos" :key="item.id">
            <tr>
              <td class="text-center">
                {{ item.nome }}
              </td>
              <td class="text-center">
                {{ item.cpf }}
              </td>
              <td class="text-center">
                {{ item.cidade }}
              </td>
              <td>
                <button class="btn btn-danger" >
                  Excluir
                </button>
                <button  class="btn-sm btn-primary"
                  @click="setVal(item.nome, item.cpf, item.cidade)"
                  data-toggle="modal"
                  data-target="#myModal">Editar</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
     </div>
   </div>
 </div>

 <script>
  export default {
 mounted() {
//console.log("Component mounted.");
},
 props: {
  alunos: Object,
 },
beforeMount() {
  this.obterAlunos();
},
methods: {
  novo() {
    window.location = "./novo";
  },
  obterAlunos() {
    axios.get("./alunos").then(({ data }) => {
      this.alunos = data;
    });
  },
  setVal(val1, val2, val3) {
    console.log(val1, val2, val3)
   },
 },
 };
</script>

In the method setval() I pass the parameters and open a modal:

<template>
 <div>
   <div class="modal-body">
    <input type="hidden" disabled  class="form-control" id="e_id"name="id" required:value="this.id"/>
  <input type="text" class="form-control" name="nome" required :value="this.nome" />
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-primary">Save changes</button>
  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</template>

<script>
export default {
 mounted() {},
 props: {
 nome: {
  type: String,
 },
},
methods: {
  voltar() {
   window.location = "./home";
    },
 },
};

But in my modal I do not know how to get the values informed method setval();

my app.js:

const app = new Vue({
  el: '#app',
  data: {
     nome: '',
     cpf: '',
     cidade: '',
   },
});

I can pass the data sends Java:

$('#nome').attr('value', val1);

But I know it must not be good practice.