Pourquoi la vieille valeur n'est-elle pas transmise à la composante VUE?

<template>
    <div>
        <input
            type="text"
            autocomplete="off"
            v-model="query"
            v-on:keyup="autoComplete"
            class="form-control js-region-name"
            name="regionName"
            value=""
        >
        <input
            type="hidden"
            class="form-control js-region-id"
            name="regionId"
            value="enteredRegion">
        <div class="panel-footer" v-if="results.length">
            <ul class="list-group select-region">
                <li class="list-group-item list-region" v-for="result in results" v-on:click="selectRegion(result)">
                    {{ result.name }}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                results: [],
                query: '',
            }
        },
        methods: {
            autoComplete() {
                this.results = [];
                if(this.query.length > 2){
                    axios.get('/api/regions',{params: {_limit: 2, query: this.query}}).then(response => {
                        this.results = response.data;
                    });
                }
            },
            selectRegion(result) {
                let inputWithRegionName = document.querySelector('.js-region-name');
                let inputWithRegionId = document.querySelector('.js-region-id');
                let listRegions = document.querySelector('.panel-footer');

                inputWithRegionName.value = result.name;
                inputWithRegionId.value = result.id;
                listRegions.hidden = true;
            }
        }
    }
</script>