Introduce $model magic

[inxilpro]

Usage:

<div x-data="{ foo: 1 }">
  <div x-model="foo">
    <button @click="$model++">+</button>
    <button @click="$model--">-</button>
  </div>
</div>

This is especially helpful for implementing Alpine components. Here's a Laravel blade example:

<!-- Component -->
<div x-model="{{ $xModel }}">
  <button @click="$model--">-</button>
  <div x-text="$model"></div>
  <button @click="$model++">+</button>
</div>

<!-- Usage -->
<div x-data="{ count: 1 }">
  <x-counter x-model="count" />
</div>

[calebporzio]

Going to hold off on this for now. Thanks Chris!

[Anachron]

I know its closed already and put to backlog but I'd like to know how big the performance inpact is here?

Also I dont see any caching?