loop with if statement in vuejs

I'm trying to make a loop to show button with if statement and another button when else but the main loop keeps giving 3 buttons instead of one but when I remove else statement the code works fine, so where is the miss

<ul class="list-group">
            <li class="list-group-item" v-for="orderedLesson in orderedLessonsInSeries" :class=" orderedLesson.id == lesson.id ? 'active' : '' ">
                <span class="col-11 text-left">
                    <button v-for="userCompletedLesson in userCompletedLessons"
                            v-if="userCompletedLesson.id == orderedLesson.id"
                            style="text-decoration: none; border: none; background-color: transparent;">
                        <i class="fa fa-check-circle fa-lg"></i>
                    </button>
                    <button v-else style="text-decoration: none; border: none; background-color: transparent;">
                        <i class="fa fa-circle-o fa-lg"></i>
                    </button>
                    <strong></strong>
                </span>
            </li>
        </ul>

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2PgGrRz
via IFTTT