Vue.js data fails to load?

Question

Vue.js

methods: {
  async edit(id) {
      this.isEdit = 1;

     await axios
        .get(
          process.env.VUE_APP_API +
            "/" +
            this.api +
            "/" +
            this.module +
            "/" +
            this.submodule +
            "/retrieve/?id=" +
            id
        )
        .then((response) => {
          let data2=response.data[0];
          this.form.title = data2[2];
         
     
        
        })
        .catch((error) => {
          error;
        });
    },
},
  mounted() {
    setTimeout(() => {
       this.edit(this.$route.params.id);
    }, 1000);
  },

Unfortunately, you have to set timeout so that the data is loaded into the form, and without timeout, the inputs are empty. Please tell me how to do it without timeout, suddenly the data will arrive in 2 seconds or more.

Answer 1

It is logical that the form is initially empty, because data arrives asynchronously. Check in the template if the data has arrived, for example, via v-if

Answer 2

watch: {
  данные: {
    immediate: true,
    handler() {
      if (данные) {
        делаете чего там вам надо
      }
    },
  },
},