When using Axios to fetch data from a server and attempting a PUT request while needing data info from 3 tables to fill the form, sometimes it works and sometimes it doesn't. However, when debugging in the browser terminal, the PUT request always works. I noticed that another component without nested GET requests always functions correctly, but I can't retrieve data from the server if those GET requests aren't nested.

The script code is provided below. Any assistance in identifying the issues would be greatly appreciated.

  
<template>
  <div class="container-fluid">
    <div style="margin:40px;background-color:rgba(255, 255, 255, 0.7);">
      <div class="row">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">Home</a></li>
            <li class="breadcrumb-item"><a href="/usuarios">Usuarios</a></li>
            <li class="breadcrumb-item"><a href="/roles">Roles</a></li>
            <li class="breadcrumb-item"><a v-bind:href="rol_url">{{rol_name}}</a></li>
            <li class="breadcrumb-item active" aria-current="page">Editar Rol</li>
          </ol>
        </nav>
      </div>
      <div class="row">
        <div class="col-md-8 offset-md-2" style="margin-bottom:80px;">
          <div class="row">
            <div class="col">
              <button onclick="window.history.back();" class="btn btn-primary" style="background:#003e1e;border-color:#003e1e;">
                <font-awesome-icon icon="arrow-left" size="lg"></font-awesome-icon>
              </button>
            </div>
          </div>
          <div>&nbsp;</div>
          <div class="row justify-content-center">
            <div class="col-5 align-self-center">
              <form>
                <div class="form-group">
                  <label for="rolName">Nombre del rol:</label>
                  <input v-model="rol_name" type="text" class="form-control" id="rolName" aria-describedby="rolName" placeholder="Nombre">
                </div>
                <div class="form-group">
                  <label for="rolModules">Modulos del rol:</label>
                  <multiselect v-model="rol_mod" :options="modules" :multiple="true" :close-on-select="true" :clear-on-select="false" :hide-selected="true" :preserve-search="true" placeholder="Seleccione los modulos" label="name" track-by="modulo" :preselect-first="false">
                  </multiselect>
                </div>
                <div v-for='(module, index) in rol_mod' :key='index' class="form-group">
                  <label for="rolModules">Permisos de {{module.name}}</label>
                  <multiselect v-model="module.permisos" :options="permits" :multiple="true" :close-on-select="true" :clear-on-select="false" :hide-selected="true" :preserve-search="true" placeholder="Seleccione los permisos del modulo" label="name" track-by="_id" :preselect-first="false">
                  </multiselect>
                </div>
                <div class="form-group">
                  <label for="rolStates">Estado del rol:</label>
                  <multiselect v-model="rol_state" :options="states" track-by="name" label="name" :searchable="false" :close-on-select="true" :show-labels="true" :placeholder="rol_state_get">
                  </multiselect>
                </div>
                <div class="form-group">
                  <label for="permitDescription">Descripción:</label>
                  <textarea v-model="rol_description" class="form-control" aria-label="permitDescription"
                  placeholder="Descripción" :rows="6" :max-rows="10"></textarea>
                </div>
                <div>&nbsp;</div>
                <div class="row justify-content-center">
                  <div class="col-4 text-center">
                    <button class="btn btn-primary" v-on:click="submit()" style="background:#003e1e;border-color:#003e1e;">
                      <font-awesome-icon icon="save" size="lg"></font-awesome-icon>
                      Guardar
                    </button>
                  </div>
                  <div class="col-4 text-center">
                    <a class="btn btn-primary" style="background:#003e1e;border-color:#003e1e;" v-bind:href="rol_url">
                      <font-awesome-icon icon="times-circle" size="lg"></font-awesome-icon>
                      Cancelar
                    </a>
                  </div>
                </div>
                <div>&nbsp;</div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Multiselect from 'vue-multiselect'
const axios = require('axios');
var API_IP = process.env.VUE_APP_API_IP

export default {
  components: {
    Multiselect
  },
  data () {
    return {
      rol_auditoria: {},
      modules: [],
      permits: [],
      rol_name: "",
      rol_state: "",
      rol_state_get: "",
      rol_description: '',
      states: [
        { name: "Activo", activo: "true" },
        { name: "Inactivo", activo: "false" }
      ],
      rol_mod: [],
      rol_url: ""
    }
  },
  mounted () {
     // Function code here      
  },
  methods: {
    submit: function() {
       // Function code here
    }
  }
}

</script>