Question 18: Consider the following Vue application with markup “inde…

1<div id = "app">
2
3    <input v-model = "name" @input = "do_something">
4    <p> {{age}} </p>
5</div>
6<script scr = "app.js"></script>

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