<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>
Vue.config.productionTip = false;

function tm(ms, msg) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(msg);
    }, ms);
  });
}

function out(msg) {
  document.write(`<p>${msg}</p>`)
}

const asyncCycle = new Vue({
  async beforeCreate() {
    out(await tm(4000, "BEFORE CREATE"));
  },
  async created() {
    out(await tm(3000, "CREATED"));
  },
  async beforeMount() {
    out(await tm(2000, "BEFORE MOUNT"));
  },
  async mounted() {
    out(await tm(1000, "MOUNTED"));
  }
});


asyncCycle.$mount("#app");
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.