Есть вот такая конструкция: <% data.forEach((item) => { %>

Question

Есть вот такая конструкция: <% data.forEach((item) => { %>

<div class="row">
<% if(item.isLink) { %>
<a class="class-1" href="/<%= item.link %>">
<%= item.title %>
</a>
<% } else { %>
<a class="class-2" href="/<%= item.link %>">
<%= item.title %>
</a>
<% } %>
</div>
<% }); %>

как на наксте получить аналог, утрированный пример
<div
v-for="(item, key) in data"
:key="key"
class=""
>
<nuxt-link v-if="item.isLink" class="class-1" href="/<%= item.link %>">
<%= item.title %>
</nuxt-link>
<a v-else="item.isLink" class="class-2" href="/<%= item.link %>">
<%= item.title %>
</a>
</div>

в итоге после 2 итераций, должно получиться:
<div>
<nuxt-link class="class-1" to="/link">
text
</nuxt-link>
<a class="class-2" href="/link">
text
</a>
</div>
думаю объяснять зачем чередование <nuxt-link> и <a> не надо?

проблемы две:
первая это итерируется DIV вместо ссылок, что логично
вторая v-if и v-for юзать не рекомендуется, а через вычисляемое свойство я чет не допетриваю как шаблон менять (либо ссылка <a> либо <nuxt-link>)