Vue.js 2 "Problem" with Single-File component

I am working on a project with Laravel 5.5 and Vue.js 2.x, after searches and questions I came to the use of components. But still I have an error when the page is rendered, I get the following error:

  

[Vue warn]: Property or method "quarterly" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: link .

     

(found in < Root >)

I have the following Single-File component defined in a FormExpenses.vue file:

<template>
    <div class="input-group">
        <input class="form-control" type="number" min="0" name="expenses" id="expenses" v-model="expenses">
        <div class="input-group-btn">
            <select class="form-control" name="expenses_range" id="expenses_range" v-model="expensesRange" :disabled="expenses < 1">
                <option value="" disabled="">Elija el rango de expensas</option>
                <option value="mensual">Mensual</option>
                <option value="trimestral">Trimestral</option>
                <option value="cuatrimestral">Cuatrimestral</option>
                <option value="semestral">Semestral</option>
                <option value="anual">Anual</option>
            </select>
        </div>
    </div>
</template>
<script>
    module.exports = {
        props: {
            value: {
                type: Number,
                default: 0
            },
            range: {
                type: String,
                default: '',
            }
        },
        data: function() {
            return {
                expenses: this.value,
                expensesRange: this.range,
            }
        },
    }
</script>

I have registered the component correctly in my main file where the Vue instance is located. Also I have defined the following element that seems to be rendered correctly in the form:

<expenses-form 
        :value="@if(old('expenses')) {{ old('expenses') }}@elseif(isset($property) && $property->expenses) {{ $property->expenses }}@endif"
        :range="@if(old('expenses_range')) {{ old('expenses_range') }}@elseif(isset($property) && $property->expenses_range) {{ $property->expenses_range }}@endif"
        ></expenses-form>

This part would seem to be working well because it shows the following rendering:

Apparently the first field is rendered correctly with its functions, but the second one is not, even though the Vue.js documentation seems to have been correctly followed ...

Any comments on this are welcome.