$refs undefined Vue JS

Di htmlnya udah kasi ref="nama" belum? This nya mungkin yg pindah ke sub function. Code lengkapnya gmana?

Ini kode yang udah jalan gan

<div class="smsgateway-1">
	<span class="torm"
		v-bind:class="{active: !pesan}"
		v-on:mousedown="pesan = false">Nomor Telepon</span>
	<span class="slash">/</span>
	<span class="torm"
		v-bind:class="{active: pesan}"
		v-on:mousedown="pesan = true"
		v-on:mouseup="focus()">Pesan</span>
</div>
<div class="smsgateway-2">
	<div class="notelp" v-if="!pesan">
	</div>
	<div class="pesan" v-else>
		<textarea v-model="textArea" ref="pesan"></textarea>
	</div>
</div>

di kode bagian ini gan

// yang ini bener
<span class="torm"
	v-bind:class="{active: pesan}"
	v-on:mousedown="pesan = true"
	v-on:mouseup="focus()">Pesan</span>

// tadinya begini, gk bisa2 focus() nya. musti klik nya 2x baru ngefokus karena refs nya undefined
<span class="torm"
	v-bind:class="{active: pesan}"
	v-on:click="pesan = true, focus()">Pesan</span>

nah yg kode diatas yg ke2 g bekerja gan, walaupun masalahnya udah selesai pas diganti mousedown dan mouseup, tapi ane masih gretan gan pengen tau solusinya.

ini javascriptnya

var app = new Vue({
	el: '.smsgateway',
	data: {
		pesan: false
	},
	methods: {
		focus: function() {
			this.$refs.pesan.focus();
		}
	}
})

Abis ane edit gan yang diatas biar lebih ringkas

Apa pengaruh di v-if nya ya? kan elementnya belum kebuat jd gk tau ref="pesan" itu yang mana

harusnya sih ngga pengaruh v-if gan. kan waktu mousedown udah ditampilin, jadi waktu mouseup harusnya dah kebaca. pasang di jsfiddle coba gan