Vue.js ne peut pas trouver l'élément à l'aide de querySelector

Je suis en train de créer un chat de style formulaire. Si un utilisateur entre leurs données et utilise ensuite le bouton à l'intérieur de mon template avec la classe de continue-btn.

Comme vous pouvez le voir lors de la continue-btn est pressé, il utilise le nextStep méthode qui ajoute 1 à la counter de données de la propriété.

Dans mon template j'utilise ensuite v-if="counter >= 1" pour afficher la section suivante du chat de dialogue et de champ de saisie.

Je suis d'essayer d'utiliser scrollTop automatiquement défiler la page vers la nouvelle section avec l'id de #conversation__tram-1. J'ai d'abord essayé l'exécution de ce bloc de code juste après la counter avait été donné une valeur de 1:

const container = this.$el.querySelector("#conversation__tram-" + this.counter);
container.scrollTop = container.scrollHeight;

Cela ne fonctionnait pas, mais parce que j'imagine que l' #conversation__tram-1 élément n'avait pas été ajouté au DOM encore.

Pour le bien des essais, j'ai essayé en l'enveloppant dans un délai d'attente de la fonction:

  setTimeout(function(){
    const container = this.$el.querySelector("#conversation__tram-" + this.counter);
    container.scrollTop = container.scrollHeight;
  }, 3000);

Cependant, je me retrouve avec cette erreur lorsque vous essayez ceci:

Uncaught TypeError: Cannot read property 'querySelector' of undefined

Ici est ma seule vue de fichier:

<template>
<div id="conversation-app">
<!-- <div v-for="item in items">
{{ item.text }}
</div> -->
<div class="conversation__track">
<div id="conversation__tram-0">
<div class="conversation__item agent">
<img src="/assets/cdn.annuityadvicecentre.dev/images/theme-f/michael-chat-agent.jpg" class="conversation__item-prof-img" alt="Michael Chat Agent" />
<div class="conversation__item-content">
<p>
Hello my name is {{ agent }}, we'll compare the whole annuity market to bring you back the best annuity rates from the top providers for you. Let's get started, what's your name?
</p>
</div>
</div>
<div class="conversation__item customer" id="title-fullname">
<div class="conversation__item-content">
<p>
Hi {{ agent }}, my name is...
</p>
<div class="row">
<div class="col-4">
<select id="title" class="field-title" name="payload[title]"><option value="mr">Mr</option><option value="mrs">Mrs</option><option value="miss">Miss</option><option value="ms">Ms</option></select>
</div>
<div class="col-8">
<input v-model="customerName" id="full_name" class="field-full_name" name="payload[full_name]" type="text">
</div>
</div>
</div>
</div>
</div>
<transition name="fade">
<div id="conversation__tram-1" v-if="counter >= 1">
<div class="conversation__item agent">
<img src="/assets/cdn.annuityadvicecentre.dev/images/theme-f/michael-chat-agent.jpg" class="conversation__item-prof-img" alt="Michael Chat Agent" />
<div class="conversation__item-content">
<p>
Thanks {{ firstName }}, nice to meet you. To process your instant quote please can I have your Pension Value?
</p>
</div>
</div>
<div class="conversation__item customer">
<div class="conversation__item-content">
<p>
Sure, my pension value is...
</p>
<input id="pension_value" class="field-pension_value" placeholder="£" pattern="\d*" name="payload[pension_value]" type="number">
<div class="error-wrap error_pension_value is-hidden" data-format="<div class=&quot;error-text&quot;>:message</div>"></div>
</div>
</div>
</div>
</transition>
<div id="conversation__buttons">
<button type="button" class="continue-btn"
v-on:click="nextStep"
>Continue&nbsp;<i class="fa fa-chevron-right" aria-hidden="true"></i></button>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'conversation-app',
data () {
return {
agent: 'Brick',
counter: 0,
customerName: '',
}
},
methods: {
nextStep: function() {
this.counter += 1;
setTimeout(function(){
const container = this.$el.querySelector("#conversation__tram-" + this.counter);
container.scrollTop = container.scrollHeight;
}, 3000);
},
},
computed: {
firstName() {
return this.customerName.split(' ')[0];
}
}
}
</script>

Une idée de pourquoi cela ne fonctionne pas? Merci.