Add fix for $parent in when called in events only (#13)

example/component.html

@@ -53,5 +53,13 @@
     </div>
     <p x-data x-text="$component('tealSquare').color"></p>
 
+    <p class="my-4 font-bold">Parent is first encountered inside an event</p>
+    <div
+        x-data="{ color: 'pink' }"
+        class="w-64 h-64 mb-6 flex flex-col items-center justify-center"
+        :class="`bg-${color}-500`">
+        <p x-data @click="$parent.color = $parent.color === 'pink' ? 'indigo' : 'pink'">press here</p>
+    </div>
+
 	<script src="http://localhost:35729/livereload.js"></script>
 </body>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "alpine-magic-helpers",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "A set of magic helpers to use with AlpineJS",
   "main": "dist/index.js",
   "publishConfig": {
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/kevinbatdorf/alpine-magic-helpers#readme",
   "devDependencies": {
-    "alpinejs": "^2.4.1",
+    "alpinejs": "^2.7.0",
     "cross-env": "^7.0.2",
     "jest": "^26.4.2",
     "laravel-mix": "^5.0.5",

src/component.js

@@ -1,4 +1,3 @@
-// TODO: These can be refactored some to combine functionality
 function registerComponentMagicMethod() {
     Alpine.magicProperties.hasOwnProperty('parent') ||
     Alpine.addMagicProperty('parent', function ($el) {
@@ -29,15 +28,13 @@ function registerComponentMagicMethod() {
                 return
             }
         })
-
         parentObserver.observe(parentComponent, {
             attributes: true,
             childList: true,
             characterData: true,
             subtree: true,
         })
-
-        return data
+        return $el.$parent
     })
 
     Alpine.magicProperties.hasOwnProperty('component') ||