docs: update slot syntax examples

Author: adrienbaron

docs/guide/essentials/components.md

@@ -789,12 +789,16 @@ Parent markup:
 
 ```html
 <app-layout>
-  <h1 slot="header">Here might be a page title</h1>
+  <template v-slot:header>
+    <h1>Here might be a page title</h1>
+  </template>
 
   <p>A paragraph for the main content.</p>
   <p>And another one.</p>
 
-  <p slot="footer">Here's some contact info</p>
+  <template v-slot:footer>
+    <p>Here's some contact info</p>
+  </template>
 </app-layout>
 ```
 
@@ -860,7 +864,7 @@ Now when we use the `<todo-list>` component, we can optionally define an alterna
 <vue-gwt:import class="com.mypackage.Todo"/>
 <todo-list v-bind:todos="todos">
   <!-- Define a variable todo that will get the value of the binded attribute todo -->
-  <template slot-scope="{ Todo todo }">
+  <template v-slot="{ Todo todo }">
     <!-- Define a custom template for todo items, using -->
     <!-- `slotProps` to customize each todo.            -->
     <span v-if="todo.isComplete()">✓</span>
@@ -925,7 +929,7 @@ The API for a Vue component comes in three parts - props, events, and slots:
 
 - **Slots** allow the external environment to compose the component with extra content.
 
-With the dedicated shorthand syntaxes for `v-bind` and `v-on`, the intents can be clearly and succinctly conveyed in the template:
+With the dedicated shorthand syntax for `v-bind` and `v-on`, the intents can be clearly and succinctly conveyed in the template:
 
 ```html
 <my-component
@@ -934,8 +938,12 @@ With the dedicated shorthand syntaxes for `v-bind` and `v-on`, the intents can b
   @event-a="doThis"
   @event-b="doThat"
 >
-  <img slot="icon" src="...">
-  <p slot="main-text">Hello!</p>
+  <template v-slot:icon>
+    <img src="...">
+  </template>
+  <template v-slot:main-text>
+    <p>Hello!</p>
+  </template>
 </my-component>
 ```