If you are reading this post, then you know that VueJS has recently released their three major version of the software. This version has amazing new features, but unfortunately, like every major release, it also include some breaking changes.

This post is part of a series that will cover the less known Breaking changes that will be delivered with this new version.

This article is going to cover the changes that will involve v-sync and the newly updated v-model

.sync

In case you have not used this before, the .sync modifier was used to support users in achieving a two way binding with a simple syntax.

The following example comes straight from the Vue 2 documentation: Sync modifier.

Expected two-way binding syntax

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>

.sync shorthand:

<text-document v-bind:title.sync="doc.title"></text-document>

Unfortunately, the above syntax is not going to work anymore as this has been removed from the framework.

(new) v-model

I know what you are probably thinking right now… Why is the word “new” in front of v-model? You have surely used it many times before to achieve two-way binding with your input fields.

The truth is that the VueJs core team has worked hard to make things better for all future users, and in doing so, they have decided to standardize the two-way binding syntax.

In the latest version of the framework, the following syntax can be used instead of the .sync as showed above:

<ChildComponent v-model:title="pageTitle" />

Further changes

The above-mentioned is just one of the small changes that have been applied to the v-model directives. If you are interested in learning more about other changes, please take a look at the official documentation: v-model changes and migration