modelable.js

<x-chart wire:model="chartData" />

<!-- I can be explicit if I want… -->
<div x-modelable="values" x-data="{
  values: [],
  init() {
    const chart = new Chart(this.$refs.canvas, {
      data: this.values
    });
    
    Alpine.watch('values', fn() => chart.update(this.values));
  }
}">
</div>

<!-- Or, if I don't set up a modelable -->
<div x-data="{
  init() {
    const chart = new Chart(this.$refs.canvas, {
      data: this.model // This always exists if I don't define it
    });
    
    Alpine.watch('model', fn() => chart.update(this.model));
  }
}">
</div>


<!-- Which is just essentially… -->
<div x-modelable="model" x-data="{
  model: [],
  // ...
}">
</div>