I have a component 'form' which contains of 6 questions. I have a plugin for generating phone input. The phone question is 3rd and I need to generate it only when the number of question is 3rd. I have an index of questions in data() hook, so I need to call function generateTel() when the index is 3 because this input creates in DOM only when the index is 3.

The html looks like:

<div v-if="index === 1" class="question"></div>
<div v-if="index === 2" class="question"></div>
<div v-if="index === 3" class="question"></div>
<div v-if="index === 4" class="question"></div>
<div v-if="index === 5" class="question"></div>
<div v-if="index === 6" class="question"></div>

How can I track when the index equals 3? Or maybe it isn't the best practice and I shouldn't use v-if?

Note: the Bergur's solution works but I had to add some corrections:

watch: {
 index(newVal) {
  if (newVal === 3) {
     let ref = this // to avoid this.generateTel() is not a function error
     setTimeout(function () { // add setTimeout to avoid calling method on undefined 
       ref.generateTel()
     }, 100)
  }
 }
}