How to set default value to select menu in Vue.js

Last Updated: December 6, 2020

I need to set the default value to the select Dropdown in Vue.js component. This is very useful when you edit a form

I am retrieving the data from REST API end point

This is what I have in template section of the component

 <div class="select is-small">
    <select v-model="category">
        <option    v-for="(category, index) in categories" :value=""  >{{}}</option>

I have named the model v-model=”category” which is defined in data() section

data () {
     return {

In the mount() , I am going to set the default value

mounted () {

	.then(response => {
	    this.product =
	.catch(error => {

Here I am getting the category id from the product and assign it to category.

Now you have set the default value as shown on the following image

Vue Select Default Value