Why the line “console.log(”addToCart 3“);” is execute end of the execution time in my JavaScript code

I have two functions in VueJS that sent a request in URL to fetch data. I am trying to get data using this.pro_cart_id after URL POST requests but it's executing at end of the time. But after click the second time it's working fine.

HTML CODE

<div class="card" v-for="room in allRooms" :key="room.room_id">
    <div class="card-body">
    <h5 class="card-title">${ room.room_name }</h5>
    <p class="card-text">${ room.room_description }</p>
    <a href="javascript:" class="btn btn-primary" @click="addToCartDetails(room.room_id);">Add to Card</a>
</div>

Vue JS Global Data

data: {
    .........
    pro_cart_id: 0,
},

Vue JS Raw Code

addToCartDetails: function(room_id) {
  console.log("addToCartDetails 1");
  this.addToCart();
  console.log("addToCartDetails 2");
  console.log(this.pro_cart_id);
  return false;
  let cartDetailsData = {'cart_id': `${this.pro_cart_id}`, 'room_id': `${room_id}`};
  let data = JSON.stringify(cartDetailsData);

  console.log(data);

  this.$http.post(`/api/cart-details/`, data)
    .then((resp) => {
      console.log(resp.data);
    })
    .catch((err) => {
      console.log(err);
  })
},

addToCart: function() {
  console.log("addToCart 1");
  let requestedData = {'session_id': `${this.session_id}`};
  let js = JSON.stringify(requestedData);
  console.log("addToCart 2");
   this.$http.post(`/api/carts/`, js)
      .then((resp) => {
        console.log("addToCart 3");
      this.pro_cart_id = resp.data.cart_id;
      })
      .catch((err) => {
        console.log(err);
    })
  console.log("addToCart 4");
},

Output in console

Please see the image in console log output https://i.stack.imgur.com/RQ11X.png

In the output section, you can see addToCart 3 is executed last time.