Can't use Slick-Slider with Dynamic data whwn pulling from external API - vuejs2

Question

Trying to build a website with some sliders.for slider i used SLICK slider.Here is my code .
<template>
<div class="homePopularVenue">
<div class="container">
<h2 class="text-center sub-headwords">POPULAR VENUE</h2>
<!--slider start-->
<div class="home-slider-popular-venue">
<div>
<div class="well">
<span class="half-image-temp">
<img class="img-rsponsive" src=" http://placehold.it/250x150" alt="">
</span>
<span class="half-content-temp">
<h3 class="title">HELLOW</h3>
<h5 class="small">Welcome to Hellow World</h5>
BOOK NOW
</span>
</div>
</div>
</div>
<div class="text-center">
VIEW ALL
</div>
</div>
</div>
</template>
<script>
export default {
name: 'homePopularVenue',
data () {
return {
posts: []
}
},
mounted() {
this.create();
this.$http.get('https://newsapi.org/v1/sources?language=en')
.then(response => {
console.log(response.data);
this.posts = response.data.source;
})
},
methods:{
create (){
$('.home-slider-popular-venue').slick({
slidesToShow: 4,
slidesToScroll: 1,
infinite: true,
dots: true,
autoplay: true,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
}
]
});
}
},
created: function(){
}
}
</script>
<style scoped>
.sub-headwords:after{
content:"";
width:200px;
background: #F99A13;
height: 4px;
display: block;
margin: auto;
margin-top: 15px;
margin-bottom: 30px;
}
.home-slider-popular-venue .well{
box-shadow: 2px 4px 8px 0 rgba(46,61,73,.2);
margin: 30px 10px;
transition: .2s ease-in-out;
}
.home-slider-popular-venue .well:hover{
box-shadow: 12px 15px 20px 0 rgba(46,61,73,.15);
}
.half-image-temp{
max-height: 250px;
}
.half-image-temp img{
width: 100%;
display: block;
margin: auto;
}
.half-content-temp{
}
</style>
Everything was good before i put the data dynamicaly in slider, after putting the data dynamically in slider its not working.
<template>
<div class="homePopularVenue">
<div class="container">
<h2 class="text-center sub-headwords">POPULAR VENUE</h2>
<!--slider start-->
<div class="home-slider-popular-venue">
<div v-for="post in posts">
<div class="well">
<span class="half-image-temp">
<img class="img-rsponsive" src=" http://placehold.it/250x150" alt="">
</span>
<span class="half-content-temp">
<h3 class="title">HELLOW</h3>
<h5 class="small">Welcome to Hellow World</h5>
<p> {{post.id}} </p>
BOOK NOW
</span>
</div>
</div>
</div>
<div class="text-center">
VIEW ALL
</div>
</div>
</div>
</template>
Also the same problem is happening with OWl.Carousel.