Request to update docs for x-modelable

[marshnmedia]

This is a request that might help others out, and save them the time I spent trying to understand how to best build reusable components in Laravel that use AlplineJS. The current example does not do a great job of describing the power of x-modelable. Specifically, that you can use x-model again inside a child element with an x-modelable declared. I glanced over it at first and didn't understand it.

Currently it looks like this:

<div x-data="{ number: 5 }">
    <div x-data="{ count: 0 }" x-modelable="count" x-model="number">
        <button @click="count++">Increment</button>
    </div>
 
    Number: <span x-text="number"></span>
</div>

Notice there is nothing else using x-model inside the child component.

Something like this would better describe the power of "exposing state to the outside through x-model as if it were a native input." Notice the input inside the child element that also has the x-model set.

<form x-data="{ parentValue: '' }">
  <div x-data="{ childValue: '' }" x-modelable="childValue" x-model="parentValue">
    <input x-model="childValue" placeholder="Type and see..." />
    <br>Child value: <span x-text="childValue"></span>
  </div>
  Parent value: <span x-text="parentValue"></span>
</form>

reference: I found this here: https://stackoverflow.com/questions/71694468/alpinejs-catch-child-component-value-if-set/71702749#71702749

[ekwoka]

You can make the PR.