Getting data from database using vuejs and laravel

Looks like you are mixing a bit the PHP and JavaScript code trying some luck. The best way is creating a service response to get the personal objectives like an API.

So lets supose that you create a controller, called at /personal-objectives for example, that returns an array of objects with the structure of { id: number, name: string }

Then your code for the HTML would look like:

<div id="pers_obj" class="form-group form-duration-div">
  <select name="personal_objective" v-model="personal_objective">
    <option value="0" class="form-control">--Select Objective--</option>
    <option v-for="po in pos" value="@{{ po.id }}" class="form-control">@{{ po.name }}</option>
  </select>
</div>

And your JavaScript (assuming you are ussing vue-resource library for ajax calls) like:

var pers_objective = new Vue({
  el: '#pers_obj',
  data: function() {
    return {
      personal_objective: null,
      pos: [];
    };
  }

  created: function() {
    this.loadPersonalObjectives();
  }

  methods: {
    loadPersonalObjectives: function() {
      this.$http.get('personal-objectives').then((response) => {
        this.pos = response.data.pos;

      }, (response) => {
        console.log(response);
      });
    }
  }
});

The above code will make an ajax GET call when the component is created to /personal-objectives which will return a JSON (don't forget to return the array encoded this way and set the proper header) array of bjects that on error will be displayed in console, and on succed the array will be assigned to the pos javascript variable and updated in the HTML creating the corresponding options reactively!

You may need to update the URL adding the root / in case you are not configuring the vue-resource with the root option (Vue.http.options.root)