fix(docs): initialise data, fix typo in x-on example (#4701)

Author: alexei

packages/docs/src/en/directives/on.md

@@ -113,8 +113,9 @@ Here's an example of a button that changes behaviour when the `Shift` key is hel
 
 ```alpine
 <button type="button"
+    x-data="{ message: 'select' }"
     @click="message = 'selected'"
-    @click.shift="message = 'added to selection'">
+    @click.shift="message = 'added to selection'"
     @mousemove.shift="message = 'add to selection'"
     @mouseout="message = 'select'"
     x-text="message"></button>
@@ -124,6 +125,7 @@ Here's an example of a button that changes behaviour when the `Shift` key is hel
 <div class="demo">
     <div x-data="{ message: '' }">
         <button type="button"
+            x-data="{ message: 'select' }"
             @click="message = 'selected'"
             @click.shift="message = 'added to selection'"
             @mousemove.shift="message = 'add to selection'"