Question 12: Consider the following Vue application with markup index…

1<div id="app"></div>
2<script src="script.js"></script>

1new Vue({
2    el: '#app',
3    template: `<div>
4                    Process: {{process}}<br>
5                    Count: {{count}}
6               </div>`,
7    data: {
8        process: "Start",
9        count: 5,
10    },
11    beforeCreate() {
12        this.process = this.process + " -> Init"
13        this.count = this.count + 2
14    },
15    created() {
16        this.process = this.process + " -> Ready"
17        this.count = this.count * 2
18    },
19    beforeMount() {
20        this.process = this.process + " -> Render"
21        this.count = this.count - 3
22    },
23
24    mounted() {
25        this.process = this.process + " -> Complete"
26        this.count = this.count / 2
27    },
28})