Question 8: Consider the following Vue application with markup “index…

1<div id = "app">
2    <input v-model = "course" @input = "do_something">
3    <p> {{role}} </p>
4</div>

1new Vue({
2    el : "#app",
3    data : {
4        course : "#app",
5        role : "user",
6    },
7
8    mounted () {
9        try {
10            this.course = localStorage.getItem("course").split(" ")[0];
11            this.role = localStorage.getItem("course").split(" ")[1];
12            localStorage.setItem("course",
13                localStorage.getItem("course").split(" ")[0] + " " +
14this.course);
15        }
16        catch {
17            this.course = "MAD_II";
18            this.role = "admin";
19        }
20    },
21
22    methods : {
23        do_something() {
24            localStorage.setItem("course", this.course);
25            localStorage.setItem("role", this.role);
26        }
27    }
28})