Vue.js で select の option にテンプレートが見えてしまう

lect の option を動的に作る場合、次のように v-for を使用して実現できるそうです。

<div id="app">
    <select>
        <option v-for="item in options">{{ item }}</option>
    </select>
    <button type="button">ボタン</button>
</div>

var app = new Vue({
    el: '#app',
    data:{
        options: ['とんかつ', 'らーめん', 'かれー']
    }
});

しかし、これだと一瞬ですが次のように {{ item }} というテンプレートの文字列が表示されてしまいました。

■ 空白の option を設定しておく

もっと良いやり方がありそうですが、空白の option を仕込んで置いて v-if で消えるようにしてみました。

<div id="app">
    <select>
        <option v-if="options.length === 0"></option>
        <option v-for="item in options">{{ item }}</option>
    </select>
    <button type="button">ボタン</button>
</div>

一瞬空白の表示になって

選択肢が設定されました。

一応、{{ item }} という派手な見た目よりはいくらかおとなしくなったと思います。