Expose $refs to data object methods

src/component.js

@@ -6,6 +6,8 @@ export default class Component {
 
         const rawData = saferEval(this.el.getAttribute('x-data'), {})
 
+        rawData.$refs =  this.getRefsProxy()
+
         this.data = this.wrapDataInObservable(rawData)
 
         this.initialize()
@@ -253,7 +255,6 @@ export default class Component {
     runListenerHandler(expression, e) {
         this.evaluateCommandExpression(expression, {
             '$event': e,
-            '$refs': this.getRefsProxy(),
         })
     }
 

test/ref.spec.js

@@ -22,3 +22,21 @@ test('can reference elements from event listeners', async () => {
 
     await wait(() => { expect(document.querySelector('span').innerText).toEqual('lob') })
 })
+
+test('can reference elements from data object methods', async () => {
+    document.body.innerHTML = `
+        <div x-data="{ foo() { this.$refs.bob.innerText = 'lob' } }">
+            <span x-ref="bob"></span>
+
+            <button x-on:click="foo()"></button>
+        </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('span').innerText).toEqual(undefined)
+
+    document.querySelector('button').click()
+
+    await wait(() => { expect(document.querySelector('span').innerText).toEqual('lob') })
+})