drop down menu - vue.js select v-model value not in $(element).val() -

i'm trying load form values cache on route load if navigates 1 route don't lose settings. checkboxes , text inputs working correctly. selects seem have issue.

here's element:

<select id="client" name="client[]" multiple="" v-model="chosen_clients">    <option v-for="client in clients" v-bind:client="client" :value="client.id">@{{ client.name }}</option> </select> 

first, check cache , update address bar:

beforecreate: function(){     if(sessionstorage.getitem('invoiceable')){         router.push({ path: '/invoiceable?'+sessionstorage.getitem('invoiceable')});     } }, 

then bind data address bar:

data: function(){     return {         chosen_clients: this.$route.query['client[]'] ? (array.isarray(this.$route.query['client[]']) ? this.$route.query['client[]'] : [this.$route.query['client[]']]) : [],     } }, 

later, after mounted, want fetch data , update address bar, there's problem:

var data = $('#invoiceable-form').serialize(); //this information not match console.log(this.chosen_clients); //this correct console.log($('#client').val(); //this empty, though visually, select has selected options 

eventually, $('#client').val() has correct value (meaning visibly selected options appear part of serialized form. know because have console.logs set on beforeupdate less second after value not present in .serialized shows without interaction select. if manually set $('#client').val([2,12]); before .serialize() correct values aren't there. can force issue manually adding data result of .serialize, feels hacky.

@roy j right. select options weren't loaded yet.