bind checkbox inputs to related model objects array with v-model

Using Laravel and Vue, I have an "edit project" form with a checkbox field of "areas" to select for the given project. There is a BelongsToMany relationship between focus areas and projects. I have the project loaded with all of its relationships, including areas (as an array of objects), in the data object of my Vue instance. Each area object has an area_name and an id.

Currently my form uses a separate data item called "selectedAreas", and this is what I use as the v-model for each area checkbox item (the value for each checkbox item is an area_id -- a number. On submit, a Vue method uses axios to update the database. But the project object in Vue is not updated unless I reload the project.

This is not necessarily horrible, but it feels a little clunky. But is there a way to bind each area checkbox item directly to the project->areas object (something like project.areas.[].id), allowing that object to update dynamically without my having to reload the project?