Como pedir a Vue.js que actualice la interfaz

Mientras estaba haciendo un componente, me encontré con este caso, que estoy bien seguro que será bastante común. El componente ponía un texto que proviene de la base de datos y cuando se hace click sobre el, cambia a un input para que el usuario pueda cambiar el valor del campo, y después, se escribe a la base de datos, la lógica es la siguiente:

<div v-if="this.editable">
  <input type="text" ref="nota" :id="notaid"
        v-model="nombre" @onsubmit="enviar"
        v-on:keyup.enter="enviar"
        v-on:blur="enviar" class="form-control">
</div>
<div v-else>
  <p @click="makeEditable">{{ nombre }}</p>
</div>

editable inicia siendo falso, por lo que se despliega el valor del nombre, definido en la sección data. Cuando se hace click, se ejecuta la función makeEditable() en la sección de methods, que es algo tan sencillo como:

makeEditable() {
    this.editable = true;
},

Lo cual funciona perfectamente, pero lo que sería conveniente es que en el momento que aparece el campo, este tome el foco. Esto se lograría con una modificación sencilla al makeEditable:

  makeEditable() {
    this.editable = true;
    this.$refs.nota.focus();
  },

Esto funciona sin problemas para elementos que ya existen en la página, pero para los recién creados por un v-if genera un error, por lo que hay que decirle explícitamente a Vue.js que hubo un cambio, esto se hace con la función this.$nextTick() y el código de arriba queda de la siguiente manera:

  makeEditable() {
    this.editable = true;
    this.$nextTick(() => this.$refs.nota.focus())
  },