[Vuejs]-Laravel vue select selected option not display value

The Problem is that you bind the whole object as value. Even though the object you receive from your call and the object you used to bind the value property to have the same “content” (props & values) they are not the same. So it will not be preselected.

What you actually should do is only bind the id of the task and if you want to display the result find the object that has the id from your alltask list

https://jsfiddle.net/eywraw8t/382079/

<select v-model="form.task">
  <option>Please Select</option>
  <option :value="t.id" v-for="(t, i) in alltask" :key="i">{{ t.name }}</option>
</select>

<p>
  {{ selectedTask }}
</p>

As you only select one task I was wondering why you have “form.tasks” – for my example I changed it to singular.

The computed prop selectedTask could look like this

computed: {
  selectedTask() {
    return this.alltask.find(task => {
      return task.id === this.form.task
    })
  }
}