Vue.jsでスライドショーを作っているのですがtransitionが動かない

前提・実現したいこと

Vueを使い始めて1週間ほどなのであまり詳しくないですがご教授お願い致します。

現在はVueを使ったスライドショーを作成しています。
なんとか画像が切り替わるところまではできてフェードイン、フェードアウトを付けたいと試行錯誤しているのですがうまく動作してくれません。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <title>Document</title>
8    <link rel="stylesheet" href="style.css">
9</head>
10<body>
11    <div id="app"> 
12        <div class="slideshow">
13            <transition> 
14                <img v-bind:src="images[index].img" v-for="(image,index) in images" v-if="now_slide == index">
15            </transition>
16        </div>
17    </div>
18    
19    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
20    <script src="main.js"></script>
21</body>
22</html>

SCSS
1*{
2    padding:0;
3    margin:0;
4    box-sizing: border-box;
5}
6
7html{
8    font-size:62.5%;
9}
10
11#app{
12    display: flex;
13    justify-content: center;
14    align-items: center;
15    min-height: 100vh;
16    background:#2e2e2e;
17    .slideshow{
18        background:beige;
19        img{
20            height:80rem;
21            width:130rem;
22            padding:2rem;
23        }
24    }
25    .v-enter-active,.v-leave-active{
26        transition:all 1s ease;
27    }
28    .v-enter,.v-leave-to{
29        opacity: 0;
30    }   
31}

Vue
1new Vue({
2    el:"#app",
3    data:{
4        now_slide:0,
5        images:[
6            {img:'img/car1.jpg'},
7            {img:'img/car2.jpg'},
8            {img:'img/car3.jpg'},
9            {img:'img/car4.jpg'}
10        ]
11    },
12    created:function(){
13        setInterval(()=>{
14        this.now_slide += 1
15        if(this.now_slide >= this.images.length){
16            this.now_slide = 0
17        }
18        console.log(this.now_slide)
19        },3000)
20    }
21})