Challenge 1 / 1

Imagine we wrote a component that needs to take a number and send its value plus 2 to my database (a VERY useful scenario, I know!):

<template>
    <input
        type="number"
        v-model="theNumber"
        min="1"
    />

    <button @click="sendNumber">
        Send!
    </button>
</template>

<script>
import { saveNumber } from '@/services/save-number';

export default {
    name: 'MyComponent',
    data() {
        return {
            theNumber: 0,
        };
    },
    methods: {
        sendNumber() {
            saveNumber(this.theNumber + 2);
        },
    },
};
</script>

But, oh! I've just discovered that there is a massive bug in this code! When I entered the number 1, it saved the number 12 instead of 3! What is the best way to fix this?