Load json data for the first time request and to display the same in Home Page

I am using Vue.js for the first time. I need to serialize the objects of django

views.py

 def articles(request):
        model = News.objects.all() # getting News objects list
        modelSerialize =  serializers.serialize('json', News.objects.all())
        random_generator = random.randint(1,News.objects.count())    
        context = {'models':modelSerialize, 
                  'title' : 'Articles' , 
                  'num_of_objects' : News.objects.count() , 
                  'random_order' :  random.randint(1,random_generator) ,
                  'random_object' : News.objects.get(id = random_generator ) ,
                  'first4rec' : model[0:4],
                  'next4rec' : model[4:],
                  }
        return render(request, 'articles.html',context)

I have tried to display serialized json data in html its working fine there,

Now , how to intialize json data in vue instance and to access in html using v-repeat attribute.

https://jsfiddle.net/kn9181/1yy84912/

Please can any one help???