x-data Documentation Not Clear

[jherdman]

In the README documentation for x-data the following is written:

Think of it like the data property of a Vue component.

I don't find this particularly helpful as I'm not familiar with Vue. Would someone be able to explain this without referring to Vue for me?

[KevinBatdorf]

In Vue you have something like this:

const data = function () {
  return {
    count: 0
  }
}
Vue.component('button-counter', { data: data }, template)

In Alpine:

<div x-data="data()"></div>
<script>
const data = function() {
  return {
    count: 0
  }
}
</script>

Or for short:
<div x-data="{ count: 0 }">

explain this without referring to Vue

In summary, you're passing in the initial "state" of the component, ie. defining all of it's properties and values. You can also pass in methods too. Let me know if you need more clarification.

[jherdman]

OK, I think this helps a little bit. To get me to the last mile I'm left wondering two things:

1. What exactly is a component in the Alpine sense of the word?
2. What are the boundaries of its scope?

[KevinBatdorf]

A component is essentially the data object (all the properties, methods) plus events listeners, etc that you define within the component. Alpine builds a "component" (it's just what Alpine calls it) around that information and ties to the element it's declared on, or child elements (in the case of an event listener, for example)

The scope is anything inside the element, but not inside another nested component. Inner child components are out of scope of the parent.

[jherdman]

OK, let's cap this off and see if I get it before marking this as resolved.

<div x-data="{ count: 0 }"> <!-- start of First component -->
  <div x-data="{ count: 0 }"> <!-- start of Second component, its count is different -->
  </div> <!-- end of Second component -->
</div> <!-- end of First component -->

[KevinBatdorf]

That's correct.

[jherdman]

Many thanks for your time!