Allow v-model to set initial state from the input value

[dmjohnsson23]

For background, I've only just started using Vue. I am working on the progressive enhancement of an existing application, initially just trying to add a little bit of quality-of-life interactivity to the existing server-rendered HTML. When I started out on this project, I initially elected to use Alpine.js but, after finding it inadequate for some of my needs, I switched to Vue, which I'm happy to say has largely proved an excellent choice.

There is one thing I'm missing from Alpine though, and that is the .fill modifier for its x-model directive (the equivalent of Vue's v-model). Since I'm dealing with an application with pre-existing server-side templates, the existing code is already populating form data directly into the HTML inputs. The effort of converting everything over to instead populate Vue's data is well worth it on pages where I need a lot of interactivity, of which I have a handful.

However, on the majority of pages, all I really need are basic things like "hide this input unless that checkbox is checked" or "disable this input if that other input has a certain value". In such cases, I'm actually finding it easier to just use vanilla JavaScript than to use Vue, as using Vue would require more refactoring than its worth on these pages. However, since I am using Vue on other pages of the application, it would be nice to use Vue everywhere, both for convenience and consistency.

The thing that would make that possible would be a modifier to v-model which tells it to pull its initial state directly from the input value, rather than from data. However, as Vue's documentation currently states:

v-model will ignore the initial value, checked or selected attributes found on any form elements. It will always treat the current bound JavaScript state as the source of truth. You should declare the initial value on the JavaScript side, using the data option.

I'm imagining something similar to this: (personally I think .define or .init would make more sense as a name than .fill though, so I've used .define below)

<form method='post' id='my-form'>
    <label>
        <input type='checkbox' v-model.define='wants_tacos' name='wants_tacos' checked/>
        <!-- Now wants_tacos should be defined and initialized to true -->
        Yes, I want free tacos
    </label>
    <label v-if='wants_tacos'>
        <!-- Shows by default because wants_tacos is true -->
        How many tacos?
        <input type='number' name='num_tacos' v-model.define='num_tacos' value='42'/>
        <!-- Now num_tacos is defined and initialized to 42 -->
    </label>
</form>
<script>
    let app = Vue.createApp({}); // data is not necessary here because all the data is defined in the HTML
    app.mount('#my-form');
</script>

I definitely don't know enough about Vue's internals to know how hard or easy implementing this might be, but I do think it would be a very helpful feature for the progressive enhancement use case.