Vue 1.0 .sync vs Vue 2.3 .sync

Here’s a simple example for Vue 1.0:

Using .sync with Vue 1.0 — https://jsfiddle.net/wgrjb46j/

Here, the “foobar” attribute is kept in sync between the component and the root Vue instance, so that changes to either update both. Pretty simple to read and for beginners to implement. However, the .sync modifier was removed in Vue 2.0 because it broke the assumption of one way data flow (from parents into children.)

Here’s the same example updated for Vue 2.3 using the new .sync modifier:

Using .sync with Vue 2.3 — https://jsfiddle.net/y1a4up95/

Here’s some of the changes:

• The inputbox component template is wrapped in a div, because components have to have a single outer element now.
• We have to make a second, internal attribute to the component, internalfoobar, to avoid modifying the foobar property directly. (Technically, we didn’t have to do this — it’s only avoiding a Vue warning, but its certainly best practice to not write code that throws warnings, especially if you’re new to Vue.)
• Since the component needs its own data attribute, we have to add data: to the component and set it to a function since it’s a component.
• We have to use $watch to copy changes to the property foobar to the attribute internalfoobar.
• We have to use $watch again to populate changes from internalfoobar back to the root Vue instance to update foobar.
• Because we have to use $watch, we have to use the mounted lifecycle hook.
• We also have to copy the value from the foobar property to the internalfoobar attribute in the mounted hook that internalfoobar starts with the right value.

I like Vue 2, but I’m glad I had a chance to learn Vue 1 first. Vue 2 might be faster, but it requires you learn a lot more Vue than Vue 1 did for some fairly simple tasks.