v-for and v-if not working together in vue.js

Why don't use the power of Computed Properties ?

computed: {  infoOne: function () {    return this.info.filter(i => i.col === 'one')  },  infoTwo: function () {    return this.info.filter(i => i.col === 'two')  }}

Then on each list just iterate over its respective property without the need to check. Example

<ol>   <li v-for="item in infoOne">{{item}}</li></ol>

Here the working fiddle

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

Remove ! from second if v-if="item.col==='two'"

better you can do this way (to iterate only once):

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