Question 1: Consider the following Vue application with markup "index…

1<div id="app">
2    <card-component>
3        <template #title>
4            Welcome Message
5        </template>
6        <p>Main card content here</p>
7        <template #default>
8            Default slot content
9        </template>
10        <template #actions>
11            <button>Click Me</button>
12        </template>
13    </card-component>
14</div>
15<script src="app.js"></script>

1Vue.component("cardComponent", {
2    template: `<div class="card">
3                    <h2>
4                        <slot name="title"></slot>
5                    </h2>
6                    <div class="content">
7                        <slot></slot>
8                    </div>
9                    <div class="footer">
10                        <slot name="footer"></slot>
11                    </div>
12                </div>`,
13})
14
15const app = new Vue({
16    el: "#app",
17})