Question 9: Consider the following HTML, with the correct Vue 2 CDN l…

1<div id="app">
2        <p>Original Order: {{ customerOrder }}</p>
3        <p>Updated Order: {{ updatedOrder }}</p>
4        <server-component :order="customerOrder"
5@order-updated="updateOrder"></server-component>
6    </div>
7
8    <script>
9        Vue.component('server-component', {
10            props: ['order'],
11            template: `
12          <div>
13            <button @click="modifyOrder">Send Updated Order</button>
14          </div>
15        `,
16            methods: {
17                modifyOrder() {
18                    this.$emit('order-updated', this.order + ' - Extra mayo');
19                }
20            }
21        });
22
23        new Vue({
24            el: '#app',
25            data() {
26                return {
27                    customerOrder: 'Burger',
28                    updatedOrder: ''
29                };
30            },
31            methods: {
32                updateOrder(newOrder) {
33                    this.updatedOrder = newOrder;
34                }
35            }
36        });
37    </script>