Request to support a v-data attribute

[pandichef]

What problem does this feature solve?

I recently started using Alpine.js. Its best feature - in my humble opinion - is the x-data attribute. It basically allows you to create a "nameless" component and define your data/state variables in the <div> tag.

What does the proposed API look like?

<div v-data='{myvar: "Off"}'>
  <button type="button" v-on:click="myvar = (myvar === 'Off') ? 'On' : 'Off'">{{ myvar }}</button>
</div>

instead of...

<div id="app">
  <button type="button" v-on:click="myvar = (myvar === 'Off') ? 'On' : 'Off'">{{ myvar }}</button>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      myvar: 'Off',
    },
  });
</script>

[posva]

See #7325