bladeの@for文で作られた要素をvueで条件に合わせて表示させたい

Question

色々と勉強している初心者です
よろしくお願いします。

前提・実現したいこと

要素を一度に全て出すのではなく、ボタンを押すことで数項目ずつ表示させるようにしたい

該当のソースコード

<div id="app">
   @for($i = 1; $i <= 10; $i++)
　　 <div v-if="">
      <p>{{$i}}番目</p>
      <input type="text" value=""></input>
     </div>
   @endfor
   <button class="" @click="plusInput">さらにフォームを表示する</button>
</div>

const app = new Vue({
    el: '#app',
    data: {
        showInput: 2
    },
    methods: {
        plusInput: function () {
            this.showInput = this.showInput + 2;
        }
    }
});

とすると、$iが１０まで変わりながらフォームが１０個表示されると思うのですが
これをvueで制御して、ボタンをおすごとに２個ずつ表示されるようにしたいです。
（「続きを読む」ボタンのようなイメージで）

試したこと

inputタグを包んでいるdivタグにv-ifを描いてみました。
$iがshowInputより小さいものを表示させればいいのだろうか？と考えましたが
bladeで表示させたものをvueでどう処理したらいいものかわかりませんでした。

補足情報（FW/ツールのバージョンなど）

laravel使用しています

Answer 1

下記でいかがでしょうか。
変更前

<div v-if="">

変更後

<div v-if="{{$i}} <= showInput">

Comments

[kentooooo]

うまくできました！
これだけでできるなんて…vueってほんと便利ですね。
本当にありがとうございました！