Un aspect très important de Vue.js. Lorsque vous modifiez le modèle, vous vous attendez à ce que le DOM soit mis à jour immédiatement. Mais ce n'est pas ce qui se passe.

En réalité, Vue.js ajoute cet "ordre" de modification du DOM à une file d'attente puis gère tous les ordres d'un coup à intervalle régulier (l'intervalle est bien sûr très court pour éviter une latence visuelle). Mais ça permet d'éviter de mettre à jour le DOM plusieurs fois lorsque de nombreuses modifications du modèle interviennent successivement.

La conséquence, c'est que si vous accédez au DOM juste après avoir mis à jour votre modèle, il ne sera pas à jour. La solution est donc d'utiliser la fonction $nextTick qui prend un paramètre un callback qui sera exécuté juste après la prochaine mise à jour du DOM :

this.$nextTick(() => {
  // Ici, votre DOM est à jour.
  document.querySelector('...')
})