Question 1

In Vue 2, what happens when you update a data property? Consider the following HTML, with the correct Vue 2 CDN links included: Html code. <div id="app"> <h3>Shopping Cart</h3> <p>Items: {{itemCount}}</p> <p>Total Cost: ${{totalCost}}</p> <button @click="addItem">Add Item ($15)</button> <button @click="removeItem">Remove Item</button> <p>Status: {{status}}</p> </div> script: const app = new Vue({ el: '#app', data() { return { itemCount: 0, itemPrice: 15, totalCost: 0 } }, computed: { status() { if (this.itemCount === 0) { return 'Empty Cart'; } else if (this.itemCount < 3) { return 'Few Items'; } else { return 'Full Cart'; } } }, methods: { addItem() { this.itemCount++; this.totalCost += this.itemPrice; }, removeItem() { if (this.itemCount > 0) { this.itemCount--; this.totalCost -= this.itemPrice; } } } }) If the user clicks the "Add Item" button 3 times, then clicks the "Remove Item" button 1 time, what will be displayed for Items, Total Cost, and Status? Consider the following code. const arr = [1, 2, 3]; const result = arr.map(function(item, index) { return this[index] * item; }, [10, 20, 30]); console.log(result); What will be the output?