Sync Vue.js data with some existing html?

I am using Vue.js clientside, and populate a list as follows (this works after an ajax/json api request which I populate with Vue data and methods).

<div id="myDiv1">
  <li v-for="item in items">
    {{ item.title }}
  </li>
</div>

I currently intialise Vue with

var vueApp = new Vue({
...
  data: {
    items: {},
  },
  methods: { ajaxCallAndUpdateVueItems: function(){...} 
  } 
})

ajaxCallAndUpdateVueItems() on some event

However, I would like to preload/render on the server side an initial state of the list (for a few reasons like speed, seo, initialstate first time only). This state varies depending on things like location of the user, which the server calculates.

So I want to send the initial page to the client with

<div id="myDiv1"> 
  <li>Some title1</li>
  <li>Some title2</li>
</div>

Is there any way to somehow initialise the Vue data with the content of myDiv1 for example, so I don't have 2 sets of html I somehow mess with (e.g deleting the initial html block and repopulating via Vue) ?