selected="selected" doesn't work in Vue?

v-model will ignore the initial value, checked or selected attributes found on any form elements. It will always treat the Vue instance data as the source of truth. You should declare the initial value on the JavaScript side, inside the data option of your component.

https://vuejs.org/v2/guide/forms.html

This may help: https://stackoverflow.com/questions/33491971/vue-js-how-to-set-option-value-selected

@Cronix I just want to get whatever the first dropdown element is and have that selected.

This is what I have currently in my .vue file:

<script>
    export default {
        data() {
            return {
                mode: this.mode
            }
        },
        created() {
            this.update();
        },
        methods: {
            update() {
                axios.get('/matches/'+this.mode).then((response) => { 
                    $('#match-ticker').trigger('replace.owl.carousel', [response.data]);
                    $('#match-ticker').trigger('refresh.owl.carousel');
                });
            }
        }
    }
</script>

How do I access the first element of my dropdown list? Or is that impossible?

Did you check the StackOverflow thread I linked to? It shows how using the :selected property.

@Cronix Not working for me. I tried the following:

<option value="{{ $competition->slug }}" @if ($loop->first) :selected="true" @endif>{{ $competition->name }}</option>

I'd do vue only instead of mixing the two, then you can just check the index == 0

also, where is mode defined, is it a prop?

or in blade:

@if ($loop->first) <option value="{{ $competition->slug }}" selected="true> .$competition->name }} @else {{ $competition->name }} @endif

I think you have overlooked how Vue's model binding works. I've forked a template on Codepen with an example.

https://codepen.io/gregrobson/pen/LONXxK

N.B. When Vue starts up it will remove items like selected="selected" - the Vue model determines the properties - nothing else.

You will see in the Javascript on line 743 I have put selected: 'GB', - when Vue has instantiated it will see "GB" and will set appropriate item as selected in the form element.

If you are using Vue then you should just have a template in HTML.

<select v-model="chosenComp">
    <option v-for="comp in competitions" v-bind:value="comp.slug">{{ comp.name }}</option>
</select>

...where your data resembles...

data: {
  chosenComp: "",
  competitions: {
    { slug: "game-of-life", name: "Game of Life" }
    // more competitions here
  }

After data has been updated assign chosenComp = competitions[0].slug - then v-model gets updated and the first option will be highlighted. (Assuming that you have at least 1 competition in the array).