I am breaking my head in this. I am new to a fullstack project involving fullstack with vue.js and node.js. My problem is: My get request is functioning and fetching data from database, but, I can't pass these data's via props on a component. It keeps telling that "paciente" is not defined. Here's the code:

<div><div v-for="(paciente, index) in pacientes" :key="index">
        <div class="blocoDeInformacao">
          <h2 class="nomePessoa">{{paciente.nome}}</h2>
          <h4 class="cpfPessoa">{{paciente.cpf}}</h4>
          <div class="bordinha"></div>

          <span class="botoes">
            <button class="botao " @click="s1 = 1, bExcluir = false"><img class="icone" src="@/assets/paper.png" alt="editarPaciente"></button>
            <button class="botao" @click="bExcluir = true, bCerto = paciente.id"><img class="icone" src="@/assets/trash.png" alt="excluirPaciente"></button>
          </span>
          <div class="excluir" v-show="bExcluir == true && bCerto == informacaoPessoa.id">
            <img class="alertIcon" src="@/assets/alert.png" alt="iconeAlerta">
            <h2 class="confirmacaoExclusao">Quer realmente excluir esse paciente?</h2>
            <div>
              <button class="botaoEscolha" @click="confirmacaoExcluir(paciente.idpaciente)">Sim</button>
              <button class="botaoEscolha" @click="bExcluir = false">Não</button>
            </div>
          </div>
        </div>
      

      </div></div>
    </div>
  </div>
</div>
<div v-else-if="s1 == 1">
  <editarPaciente :nomePessoa="paciente.nome"
       :cpfPessoa="paciente.cpf" :senhaPessoa="paciente.senha" :id="paciente.idpaciente" :key="paciente.idpaciente"/>
</div>

and the props from components:

 export default {
  name: 'editarPaciente',
  components: {
  },

  props: {

    nomePessoa: String,
    cpfPessoa: String,
    senhaPessoa: String,
    id: String
  },
  
  
}
</script>