Error: Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>
<p>I am using Vuejs and I keep getting this warning in the console. Also no data is loaded because of this warning. I checked the code for unwanted tags but did not find any.</p>

<p>Is this because of the javascript code or I have something wrong in my html?</p>

<p>Here is my code:</p>

<blockquote>
  <p>HTML</p>
</blockquote>

<pre><code>&lt;div class="row"&gt;
    &lt;div class="col-sm-12" style="margin-top: 20px;"&gt;
        &lt;form class="form-inline" method="GET" action="."&gt;
            &lt;div class="col-sm-3" style="float: right;"&gt;&lt;h4&gt;Date:&lt;/h4&gt;
                &lt;input class="form-control" style="padding-bottom:0px;" type="text" id="datepicker" readonly="true" name="date" value="2016-06-30"&gt;
                &lt;input type="submit" class="btn btn-primary btn-sm" value="Submit" &gt;
            &lt;/div&gt;

        &lt;/form&gt;
        &lt;div class="col-sm-2" style="float: right; margin-top:40px;"&gt;
            &lt;button class="btn btn-info" type="button" id="csv_export"&gt;Click to Export&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-sm-12" style="margin:20px;"&gt;
        &lt;table class="table table-sm table-striped table-bordered" id="absent-list"&gt;
            &lt;thead&gt;
                &lt;tr&gt;
                    &lt;th&gt;#&lt;/th&gt;
                    &lt;th style="text-align: center; font-size: 15px;"&gt;Full Name&lt;/th&gt;
                    &lt;th style="text-align: center; font-size: 15px;"&gt;Section&lt;/th&gt;
                    &lt;th style="text-align: center; font-size: 15px;"&gt;Person Called&lt;/th&gt;
                    &lt;th style="text-align: center; font-size: 15px;"&gt;Person Relation&lt;/th&gt;
                    &lt;th style="text-align: center; font-size: 15px;"&gt;Phone Number&lt;/th&gt;
                    &lt;th style="text-align: center; font-size: 15px;"&gt;Absent Reason&lt;/th&gt;
                    &lt;th style="text-align: center; font-size: 15px;"&gt;Remarks&lt;/th&gt;
                    &lt;th&gt;&lt;/th&gt;
                &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
                &lt;tr v-show="loading" class="text-center"&gt;
                    &lt;td colspan="7"&gt;
                        &lt;i class="fa fa-spinner fa-spin fa-4x"&gt;&lt;/i&gt;
                    &lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr v-for="record in absent_followback_records"&gt;

                    &lt;td style="text-align: center; font-size: 15px;" scope="row"&gt; {{$index + 1}}&lt;/td&gt;
                    &lt;td  style="text-align: center; font-size: 15px;"&gt;{{record.student_name}}&lt;/td&gt;
                    &lt;td  style="text-align: center; font-size: 15px;"&gt;{{record.student_section}}&lt;/td&gt;
                    &lt;td  style="text-align: center;"&gt;{{record.person_called}}&lt;/td&gt;
                    &lt;td  style="text-align: center;"&gt;{{record.person_relation}}&lt;/td&gt;
                    &lt;td  style="text-align: center;"&gt;{{record.phone_number}}&lt;/td&gt;
                    &lt;td  style="text-align: center;"&gt;{{record.absent_reason_name}}&lt;/td&gt;
                    &lt;td  style="text-align: center;"&gt;{{record.remarks}}&lt;/td&gt;
                    &lt;td  style="text-align: center;"&gt;&lt;a href="#" v-on:click="editAbsentFollowbackRecord($index)" data-toggle="modal" data-target="#absent-followback-edit"&gt; Edit &lt;/a&gt;&lt;/td&gt;

                &lt;/tr&gt;
            &lt;/tbody&gt;
        &lt;/table&gt;

    &lt;/div&gt;
&lt;/div&gt;

&lt;script src="/static/js/jquery-ui.min.js"&gt;&lt;/script&gt;
&lt;script src="/static/js/jquery.plugin.min.js"&gt;&lt;/script&gt; 
&lt;script src="/static/js/jquery.datepick.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdn.jsdelivr.net/vue/latest/vue.js"&gt;&lt;/script&gt;
&lt;script src="/static/js/csrftoken.js"&gt;&lt;/script&gt;
&lt;script src="/static/js/jquery.TableCSVExport.js"&gt;&lt;/script&gt;

&lt;script type="text/javascript"&gt;

    var absentFollowbackListAPiUrl = "/student/api/absent/followback/list/11/";
    var absent_reason = jQuery.parseJSON('[{"model": "studentprofile.absentreason", "pk": 1, "fields": {"created": "2016-05-08T06:09:42.410Z", "modified": "2016-05-08T06:09:42.410Z", "reason_name": "sick"}}, {"model": "studentprofile.absentreason", "pk": 2, "fields": {"created": "2016-05-08T06:09:42.416Z", "modified": "2016-05-08T06:09:42.416Z", "reason_name": "arrived late"}}, {"model": "studentprofile.absentreason", "pk": 3, "fields": {"created": "2016-05-08T06:09:42.419Z", "modified": "2016-05-08T06:09:42.419Z", "reason_name": "work at home"}}, {"model": "studentprofile.absentreason", "pk": 4, "fields": {"created": "2016-05-08T06:09:42.423Z", "modified": "2016-05-08T06:09:42.423Z", "reason_name": "public holiday"}}]');
    var profile_value = false;

&lt;/script&gt;
&lt;script type="text/javascript" src="/static/js/student/student-followback.js"&gt;&lt;/script&gt;
</code></pre>

<blockquote>
  <p>absent-followback.js file</p>
</blockquote>

<pre><code>$(function() {
    $( "#datepicker" ).datepick({dateFormat: 'yyyy-mm-dd'});
});

$('#csv_export').click(function (e) {
    e.preventDefault();
    $('#absent-list').TableCSVExport({
        delivery: 'download',
        filename: 'absent-list(' + $( "#datepicker" ).val() + ').csv'
    });
});

var vm = new Vue({
        el: 'body',
        data: {
            absent_followback_records: [],
            followbackRecordIndex: 'off',
            absentReasonList: absent_reason,
            loading: false,
            currentData: {},
            profile: profile_value,
            listApiUrl: absentFollowbackListAPiUrl
        },
        methods: {
            populateData: function(api_url){
                var self = this;
                $.get(api_url, function(data){
                    self.absent_followback_records = data;
                    self.loading = false;
                });
            },
            getAbsentFollowbackRecord: function () {
                var self = this;
                self.loading = true;
                var date = $( "#datepicker" ).val();
                var api_url = self.listApiUrl + '?date=' + date;
                self.populateData(api_url);
            },
            getProfileAbsentFollowbackRecord: function (event) {
                var self = this;
                self.loading = true;
                var expanded = $(event.target).attr('aria-expanded');
                if (expanded == 'false'){
                    $(event.target).html('Hide Details');
                    var studentId = $(event.target).attr('studentId');
                    var api_url = self.listApiUrl + '?student_id=' + studentId;
                    self.populateData(api_url);
                }
                else{
                    $(event.target).html('Show Details');
                }
            },
            editAbsentFollowbackRecord: function (followbackRecordIndex) {
                var self = this;
                self.currentData = self.absent_followback_records[followbackRecordIndex];
                self.followbackRecordIndex = followbackRecordIndex;
            },
            updateAbsentFollowbackRecord: function (followbackRecordIndex){
                var self = this;
                var updateData = self.currentData;
                var absent_date = updateData.date;
                var student_id = updateData.student;
                var post_url = updateData.update_url;
                var person_called = updateData.person_called;
                var person_relation = updateData.person_relation;
                var phone_number = updateData.phone_number;
                var absent_reason = updateData.absent_reason;
                var remarks = updateData.remarks;
                if (person_called){
                    var data = {
                        student: parseInt(student_id),
                        date: absent_date,
                        person_called: person_called,
                        person_relation: person_relation,
                        phone_number: phone_number,
                        absent_reason: parseInt(absent_reason),
                        remarks: remarks
                    };
                    $('#updateAbsentFollowback').html('&lt;i class="fa fa-spinner fa-spin"&gt;&lt;/i&gt; Saving').attr('class', 'btn btn-primary disabled');
                    $.ajax({
                        url: post_url,
                        type: "PUT",
                        data: JSON.stringify(data),
                        dataType: 'json',
                        contentType: "application/json",
                        success: function(responseData) {
                            $('#updateAbsentFollowback').html('Save').attr('class', 'btn btn-success');
                            if (self.profile == true){
                                api_url = self.listApiUrl + '?student_id=' + student_id;
                                self.populateData(api_url);
                            }
                            else{
                                self.getAbsentFollowbackRecord();
                            }
                        },
                        error: function( xhr, status, errorThrown ) {
                        console.log(errorThrown);
                        }
                    });
                }
            }

        },
        ready() {
            if (this.profile != true){
                this.getAbsentFollowbackRecord();
            }
        }
    })
</code></pre>