Vue warn: Property is not defined. Form input binding + conditional rendering

I have some trouble with input binding and conditional rendering: e.g. if I select grade = 1, I want to show the date field. When I load the page, I get:

[Vue warn]: Property or method "grade" is not defined on the instance but referenced during render.

My form:

<div class="form-group">
    {!! Form::label('grade', 'Grade') !!}
    {!! Form::select('grade', $grades, null, ['v-model' => 'grade']) !!}
</div>

<div class="form-group" v-show="grade == 1">
        {!! Form::label('date', 'Date') !!}
        {!! Form::date('date', null,) !!}
</div>  

Vue instance:

<script>
    new Vue({
        el: '#school',
        data: {
            grade: 1
        }
    });
</script>

What am I missing here? I am new to Vue and really want to learn more!

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