title: proper vueJS way to sync props with data
body: <p>Consider a VueJS app that allows for showing / editing blogposts. </p>
  
  <ul>
  <li>On clicking "edit blogpost" a modal (Vue component) is shown to edit the current blogpost (just an ordinary js-object). </li>
  <li>To this end I pass the current blogpost as a <code>prop</code> to the modal-component. </li>
  <li>The Modal component has a couple of form fields that should be populated with the blogpost-attributes. </li>
  <li>However, the Vue 'way' is to have a <code>data</code> object on the Modal-component that acts as the model to populate the form fields, and vice-versa, be updated when the user changes the form fields. </li>
  </ul>
  
  <p>The problem: How do I connect the blogpost which is passed as a <code>prop</code> to the <code>data</code> field of the modal-component so that: </p>
  
  <ul>
  <li>the blogpost populates the form fields</li>
  <li>the blogpost gets updated when updating the form fields</li>
  </ul>
  
  <p>What's the correct Vue way to accomplish this? </p>