Tengo una lista desplazable de la que puedo seleccionar varios elementos. Quiero implementar mediante programación una forma de desplazarme hasta la parte superior de la lista cada vez que cambio la entrada de búsqueda.

Comportamiento deseado: Por ejemplo; cuando escribo 'b' en la lista de búsqueda y me desplazo hacia abajo, si vuelvo a escribir 'e' me gustaría que se desplace hasta la parte superior

Aquí hay un ejemplo de código que muestra lo que me gustaría hacer, probé dos métodos diferentes. Probé dos enfoques diferentes en el código a continuación, donde utilizo la función scrollTop del elemento html y la función goTo de vuetify, pero ninguno de ellos funcionó.

Demostración de código-> https://www.codeply.com/p/ZGBNEHW7YS

En caso de que la demostración caduque, el código real;

 <div id="app"> <v-app> <v-main class="py-3 px-5"> <h1 class="teal--text">AutoComplete Infinite Scroll Example</h1> <v-autocomplete id="autoComplete" ref="autoComplete" v-model="selected" :items="beers" item-text="name" item-value="id" :search-input.sync="search" label="Search the beers.." return-object multiple autocomplete="off" > <template v-slot:append-item> <div v-intersect="onIntersect" class="pa-4 teal--text"> Loading more items ... </div> </template> </v-autocomplete> </v-main> </v-app>

 new Vue({ el: '#app', vuetify: new Vuetify(), data() { return { search:'', beers: [], selected: null, perPage: 30, page: 1, } }, methods: { getBeers() { console.log('page', this.page) const apiUrl = `https://api.punkapi.com/v2/beers?page=${this.page}&per_page=${this.perPage}` axios.get(apiUrl) .then(response => { this.beers = [ ...this.beers, ...response.data ] }) }, onIntersect () { console.log('load more...') this.page += 1 this.getBeers() }, }, watch:{ search:function(){ //first method let myId=document.getElementById('autoComplete') if(myId){ myId.scrollTop = 0 } //second method with ref and vuetify goto this.$nextTick(() => { this.$vuetify.goTo(this.$refs.autoComplete) }) } }, created() { this.getBeers() } })