vue.js - v-for と v-if が vue.js で連携しない

Question

テキストを送信するためにフォームが使用され、テキストを表示する列を vue に指示する 2 つのオプションが使用されます。col2 ラジオ ボタンがチェックされている場合、送信されたテキストは列 2 に表示されます。

値 'one' または 'two' を newInfo.option に渡す必要がある 2 つのラジオ ボタンがあります。submnit では、メソッドがフォーム データを配列 'info' にプッシュしました。

<input type="radio" id="col1" value="one" v-model="newInfo.col">
<input type="radio" id="col2" value="two" v-model="newInfo.col">

このデータは配列「情報」に正しくプッシュされており、それを反復処理できます。配列を反復処理できるため、これが機能していることがわかります。console.log に含まれるすべてのデータです。送信されたすべてのフォーム データがそこにあります。

次に、テンプレートでこの配列を 2 回繰り返し処理します。info.col==="one" に対して 1 回、もう 1 つの反復は、info.col==="two" の場合にのみ表示されます。v-for と v-if を一緒に使用していますが、vue.js のドキュメントには問題ないと書かれています。

https://vuejs.org/v2/guide/conditional.html#v-if-with-v-for

<div class="row">
            <div class="col-md-6">
                <ol>
                    <li v-for="item in info" v-if="item.col==='one'">
                        text: {{ item.text }}, col: {{ item.col }}
                    </li>
                </ol>
            </div>
            <div class="col-md-6">
                <ol>
                    <li v-for="item in info" v-if="!item.col==='two'">
                        text: {{ item.text }}, col: {{ item.col }}
                    </li>
                </ol>
            </div>
        </div>

完全な vue.js コードは、こちらの github にあります

そして、ここのghページで実行されています