lancer une méthode après un click, vuejs

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Je souhaite lancer une methode apres avoir selectionné le pays ( ici France )

https://jsfiddle.net/spham92/0ed7wvqj/

qui me permettrais de mettre a jour la deuxieme liste avec seulement les villes du pays concernés

Ma démarche de faire un un watch sur la variable "query" marche mais manque un peu d'elegance, car "query" change a chaque fois que je complete la saisi.
Je veux eviter d'appeler a tout bout de champs la methode qui peuple les villes a la base.
Comme c'est un element input et non select, je ne peux pas faire d'ecoute sur l'evenement selected.

const template = `
<div>
  <vue-bootstrap-typeahead
    v-model.lazy="query"
    :data="countries"
    placeholder="Saisir un pays"
  />
  <p class="lead">
    Pays selectionné: <strong>{{query}}</strong>
  </p>
</div>
`

new Vue({
  template,
  components: {
    VueBootstrapTypeahead
  },
  data() {
    return {
      query: '',
      countries: [
        'France',
        'United States',
        'Mexico'
      ]
    }
  },
  methods: {
    getVillesParPays : function() {
        console.log('liste des villes par pays')
    }
  },
  watch: {
    'query': function (newVal, oldVal) { // watch it
      if (newVal.length === 5) {
        this.getVillesParPays()
      }

    }
   },
}).$mount('#app')