Vue Budget ex

The form below is in the DOM, not in a template.

Please correct the following error(s):

{{ error }}

Given a budget of 100 dollars, indicate how much you would spend on the following features for the next generation Star Destroyer:

We can bind regular @click events here in the DOM.
But @weird events need help from slot-scope, in order to find the vue instance.

Weapons
Shields
Coffee
Air Conditioning
Mouse Droids

Current Total: {{total}}

Jack John Mike
Checked names: {{ flagsArr }}

One
Two (disabled is an attribute, yeah?)
LThree
Picked: {{ pickVal }}

Selected: {{ singleSelVal }}

Selected: {{ multiSelVal }}

Dynamic opt list: Selected: {{ dynSelVal }}

Short Message is: {{ shortMsg }}

Multiline message is:

v-model will ignore the initial value, checked or selected attributes found on any form elements. It will always treat the Vue instance data as the source of truth. You should declare the initial value on the JavaScript side, inside the data option of your component.