Vue.js（javascript）でinput要素にフォーカスを当てたい

最初はinput要素を表示しておらず、ボタンをクリックする（data.numberが1となる）とinput要素が現れる様になっています。
最初からinput要素が表示されていれば問題なくフォーカスされるのですが、
最初を見えなくしていると、2回クリックしないとフォーカスが当たりません。。。

1回のクリックでinput要素にフォーカスを当てるにはどうしたら良いでしょうか？
教えてください！よろしくお願いします！！

html
1<div id="app">
2  <input id="fundInputCi" type="text" value="" v-show="number === 1">
3  <input type="button" value="取得" @click="set">
4</div>

javascript
1var app = new Vue({
2  el: '#app',
3  data: {
4    number: 0,
5  },
6  methods: {
7    set: function(){
8      this.number = 1;
9      var targetInput = document.getElementById('fundInputCi');
10      targetInput.focus();
11    }
12  },
13});

行動規範の内容に同意します

回答1件

ベストアンサー

DOM の更新サイクル後に実行するnextTickを使えば良さそう
https://jp.vuejs.org/v2/api/index.html#vm-nextTick

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8" />
5  <!-- 開発バージョン、便利なコンソールの警告が含まれています -->
6  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
7</head>
8<body>
9<div id="app">
10  <input id="fundInputCi" type="text" value="" v-show="number === 1">
11  <input type="button" value="取得" @click="set">
12</div>
13<script>
14var app = new Vue({
15  el: '#app',
16  data: {
17    number: 0,
18  },
19  methods: {
20    set: function(){
21      this.number = 1;
22      this.$nextTick(function () {
23        var targetInput = document.getElementById('fundInputCi');
24        targetInput.focus();
25      });
26    }
27  },
28});
29</script>
30</body>
31</html>