Nuxtjs v-forとv-ifの競合

v-forとv-ifの競合について

概要

配列をv-forでレンダリングしようと思ったときに各要素にtransitionをかけるためv-forの各要素にv-ifで条件分岐を付けたのですがlintでnot-recommendされてしまいました。
動作はするので無視するなりeslintrcを修正するなりすればいい話ではあるのですが、computedで同様にtransitionをかけようとおもったらどのような実装になるのでしょうか。

元ソース

vue
1      <ul class="c-firstView__news__list">
2        <li
3          v-for=" ( item, index ) in newsList.list "
4          v-if=" newsList.state === index "
5          :key=" index "
6          class="c-firstView__news__list__item"
7        >
8          <a :href=" item.url ">{{ item.title }}</a>
9        </li>
10      </ul>
11//~~中略~~
12  data(){
13      newsList: {
14        state: 0,
15        list: [
16          {
17            date: '2019-02-16',
18            title: 'コーポレートサイトリニューアル！',
19            url: '//blog/0001'
20          },
21          {
22            date: '2019-02-17',
23            title: 'コーポレートサイトリニューアル？',
24            url: '//blog/0002'
25          },
26          {
27            date: '2019-02-18',
28            title: 'コーポレートサイトリニューアル！？',
29            url: '//blog/0003'
30          },
31        ]
32      }
33  },
34

computedでフィルタリング化

vue
1      <ul class="c-firstView__news__list">
2        <li
3          class="c-firstView__news__list__item"
4        >
5          <a :href=" filterdList.url ">{{ filterdList.title }}</a>
6        </li>
7      </ul>
8//~~中略~~
9  data(){
10      newsList: {
11        state: 0,
12        list: [
13          {
14            date: '2019-02-16',
15            title: 'コーポレートサイトリニューアル！',
16            url: '//blog/0001'
17          },
18          {
19            date: '2019-02-17',
20            title: 'コーポレートサイトリニューアル？',
21            url: '//blog/0002'
22          },
23          {
24            date: '2019-02-18',
25            title: 'コーポレートサイトリニューアル！？',
26            url: '//blog/0003'
27          },
28        ]
29      }
30  },
31  computed: {
32    filterdList: function(){
33      return this.newsList.list[this.newsList.state];
34    }
35  },
36