title: Binding Vue v-model with initial data coming from server side
body: <p>I am new to Vue and I am trying to understand some concepts. So I have a website that is a mix of server-side and front-end rendering. When the index is first loaded it will return the first 10 products which are rendered by the server-side. Then the user will use a search filter to search for specific products or just scroll down so more products are loaded. This searching and loading will be done by Vue. Now the question is how to bind the data that is rendered initially by the server with the current <code>data</code> object of Vue?</p>
  <p>The <a href="https://v3.vuejs.org/guide/forms.html#basic-usage" rel="nofollow noreferrer">documentation</a> says</p>
  <blockquote>
  <p>v-model will ignore the initial value, checked or selected attributes
  found on any form elements. <strong>It will always treat the current active
  instance data as the source of truth</strong>. You should declare the initial
  value on the JavaScript side, inside the data option of your
  component.</p>
  </blockquote>
  <p>So one can load the index without any data, then fire a second request to load the initial data but why waste one HTTP request on that?</p>