Vue 2 Using external variables inside Instance

I am working on a Laravel 5.5 & Vue 2.x project which requires to define some data in the "front-end" and use them in the Vue Instance:

First, I have my view or HTML file:

<fieldset class="form-group col-md">
    <label for="country" class="control-label">Country</label>
    <select class="form-control" name="country" id="country" v-model="selectedCountry" @change="selectCountry()">
        <option :value="null" :selected="selectedCountry">Select one</option>
        <option v-for="country in countries" :value="country.id">@</option>
    </select>
</fieldset>

<script>
    var formSelectedCountry = ;
    var formSelectedDepartment = ;
    var formSelectedLocation = ;
    var formSelectedZone = ;
</script>

This works fine. But in other pages where formSelectedCountry (for instance) is not defined Vue seems not to work.

I have this in my app.js:

data: {
    ...
    selectedCountry: formSelectedCountry,
    selectedDepartment: formSelectedDepartment,
    selectedLocation: formSelectedLocation,
    selectedZone:  formSelectedZone,
    ...
}

I have also tried to prepend these lines in order to "pre-define" them:

formSelectedCountry: '',
formSelectedDepartment: '',
formSelectedLocation: '',
formSelectedZone: '',

Or maybe there is a way to set the data with selectedCountry: (formSelectedCountry ? formSelectedCountry : null.

Any ideas are appreciated.

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2EpYC3m
via IFTTT