I need to upload data from REST API on front-end using vue.js framework but not using vue.js cli

I'm trying to get the data from rest api using vue.js. But it's not working , I've started learning vue.js just now I've tried to implement many logic but still it doesn't gives the appropriate output.

Here's my views.py file

    # Create your views here.

    class TaskViewSet(ModelViewSet):


      renderer_classes = [TemplateHTMLRenderer]
      template_name = 'templates/list.html'

      def list(self,request):
        queryset = Task.objects.all()
        serializer = TaskSerializer(queryset,many=True)

        context = {
          'serializer' : serializer.data
        }
        return Response(context)

Here's my list.html file

    <!DOCTYPE html>
    <html lang="en">
      {%load static%}
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js" 
    integrity="sha256-Gs0UYwrz/B58FsQggzU+vvCSyG/pewemP4Lssjzv8Ho=" 
    crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.4/vue- 
    resource.min.js" integrity="sha256-OZ+Xidb5+lV/saUzcfonHJQ3koQncPy0hLjT8dROdOU=" 
    crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.4/vue- 
    resource.min.js" integrity="sha256-OZ+Xidb5+lV/saUzcfonHJQ3koQncPy0hLjT8dROdOU=" 
    crossorigin="anonymous"></script>

    <title>Document</title>
    </head>
    
    <body>
      <h3>Tasks Display Here</h3>

      <div  id="app" v-for="task in tasks">
          {{task.data}}
      </div>


      <script>

         var app = new Vue({
         el : '#app',
         data:{
        
            tasks : []
         }
      },
      methods : {
        async getData(){
            try {
                // fetch tasks
                const response = await 
                this.$http.get('http://localhost:8000/api/tasks/');
                // set the data returned as tasks
                this.tasks = response.data; 
            } catch (error) {
                // log the error
                console.log(error);
            }
        
      },
      },
      created(){
          this.getData();
      }
   }


   </script>

   </body>
   </html>

I have mentioned my API url from where the data is getting retrieved but still the vue.js script is unable to collect the data from the api. I'm really confused what's actually happening in my code. If I try to print the data in console using console.log() it still returns me a plain console.