I'm doing my first proper project with VueJS, enhancing a traditional web app with components. I picked Vue because a year ago when I first started experimenting it seemed much easier than React to enhance parts of existing pages with. That story has changed since, and the React docs are beter about how to use components within pages.

I echo the issues with the attribute syntax. I found marshalling data from the server into components to be painful. I ended up with the following:

        <activity-form action="/admin/applications/edit/1001/ajax-activity"
                :staff-member="1"
                :staff-member-options="[{&quot;value&quot;:&quot;1&quot;,&quot;text&quot;:&quot;First Person&quot;},{&quot;value&quot;:&quot;2&quot;,&quot;text&quot;:&quot;Second Personki&quot;},{&quot;value&quot;:&quot;3&quot;,&quot;text&quot;:&quot;Third Person&quot;}]"
                :activity-type-options="[{&quot;value&quot;:&quot;note&quot;,&quot;text&quot;:&quot;Note&quot;},{&quot;value&quot;:&quot;reminder&quot;,&quot;text&quot;:&quot;Reminder&quot;}]"
                :is-super-administrator="true"
                @new-activity-log-entry="addActivityLogEntry"
       >
        </activity-form>

For enhancing existing server-rendered apps, is there a better story for passing data into components?